Importanța CSS în Dezvoltarea Web
Pagini web fără CSS ar fi monotone, deoarece acest limbaj de stilizare este cel care determină aspectul vizual al textului, dimensiunea elementelor, paleta de culori și așezarea pe ecran.
Ce reprezintă CSS?
CSS, acronim pentru Cascading Style Sheets (Foi de Stil în Cascadă), este un limbaj utilizat pentru a defini cum elementele HTML trebuie afișate, fie pe ecranul unui dispozitiv, fie pe suport de hârtie. CSS a fost dezvoltat de Consorțiul World Wide Web (W3C) în 1996.
La început, elementele HTML nu dispuneau de funcționalități pentru a controla stilul vizual al unei pagini web. Dezvoltatorii trebuiau să se concentreze doar pe structurarea conținutului. Introducerea etichetelor precum <font> odată cu apariția HTML 3.2 a generat noi obstacole pentru dezvoltatori.
Pe măsură ce paginile web au început să includă fundaluri colorate, fonturi diversificate și stiluri variate, rescrierea codului a devenit o sarcină complexă și costisitoare. Pentru a rezolva aceste probleme, W3C a creat CSS, care a evoluat continuu de-a lungul timpului.
De ce este important CSS?
#1. Eficiența CSS
CSS simplifică procesul de adăugare a stilurilor vizuale (font, aliniere, bordură, culoare, fundal, dimensiune) la fiecare pagină web, eliminând necesitatea de a repeta codul.
#2. Economie de timp
Aspectul vizual al unui întreg site poate fi modificat rapid prin ajustarea fișierului CSS extern.
#3. Compatibilitate cu Diverse Dispozitive
Utilizatorii accesează site-uri de pe o multitudine de dispozitive cu dimensiuni diferite ale ecranului (computere, tablete, smartphone-uri). CSS facilitează crearea de pagini web care se adaptează automat la aceste dimensiuni.
#4. Mentenanță simplificată
Aplicațiile web moderne sunt într-o continuă evoluție. CSS permite modificarea rapidă a componentelor individuale sau a întregului site web fără a afecta structura de bază a codului.
Cum funcționează CSS împreună cu HTML pentru crearea site-urilor?
HTML este un limbaj de marcare standard pentru crearea structurii paginilor web. CSS, pe de altă parte, stabilește aspectul vizual al acestor pagini create cu HTML. Într-o pagină web bine structurată, codul HTML conține text, link-uri către imagini și etichete HTML, în timp ce aspectul vizual este definit de CSS.
Codul HTML poate include un fișier CSS separat, conectat prin eticheta <link>, sau poate utiliza stiluri CSS interne sau inline. Într-un fișier HTML, titlurile sunt marcate cu <h1> și paragrafele cu <p>. Cu ajutorul CSS, se poate instrui browser-ul să afișeze tot conținutul unui paragraf cu caractere aldine, sau să definească dimensiunea și culoarea unui titlu.
Vom prezenta concret modul de funcționare al HTML și CSS în secțiunea următoare.
Modalități de implementare a CSS
#1. CSS Extern
CSS este considerat extern atunci când există un fișier HTML și un fișier CSS separat (cu extensia .css, de exemplu style.css). Fișierul CSS este conectat la fișierul HTML prin eticheta <link>.
Exemplu de fișier CSS extern:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Acest fișier CSS poate fi asociat cu următorul cod HTML:
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
</head>
<body>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
</body>
</html>
Eticheta <link> face legătura dintre foaia de stil externă și documentul HTML, iar atributul href specifică adresa fișierului CSS.
Pagina web va fi afișată după cum urmează:
Această abordare (CSS extern) este recomandată deoarece permite reutilizarea componentelor și modificări rapide și centralizate la nivelul codului.
#2. CSS Intern
CSS intern este ideal pentru paginile HTML care au un stil specific unic. Regulile de stil sunt incluse direct în documentul HTML, în secțiunea <head>.
Exemplu de CSS intern:
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Pagina web va apărea astfel:
CSS intern nu este ideal pentru majoritatea cazurilor, deoarece crește dimensiunea codului HTML, ceea ce poate afecta viteza de încărcare a paginii.
#3. CSS Inline
CSS inline include stilul direct în interiorul codului HTML. Se poate stila un paragraf, un titlu sau un div folosind CSS inline.
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>
Pagina web va fi afișată după cum urmează:
CSS inline nu este ideal pentru aplicații web complexe, deoarece adăugarea proprietăților CSS la fiecare etichetă HTML este un proces anevoios și greu de întreținut.
Pentru a aprofunda cunoștințele despre CSS, puteți consulta următoarele cursuri și cărți online.
Crearea de Site-uri Web Adaptabile cu HTML și CSS
Acest curs practic demonstrează cum să construiți site-uri web adaptabile folosind HTML5 și CSS3. Nu este necesară experiență anterioară în dezvoltarea web. Cursul explorează concepte fundamentale ca modelul cutiei, specificitatea selectorilor, sistemele de poziționare și moștenirea stilurilor.
Cursul este potrivit pentru cei care doresc să învețe să planifice, să proiecteze, să schițeze, să codeze, să testeze și să optimizeze un site web profesionist.
CSS și Sass Avansat
Acest curs avansat vă explică modul de funcționare al CSS, acoperind concepte precum cascada, specificitatea și moștenirea.
Cursul include tehnici moderne de CSS pentru crearea de pagini web puternice și adaptabile. De asemenea, introduce Sass și modul de utilizare în proiecte, variabile globale și gestionarea interogărilor media.
Este cursul ideal pentru cei care vor să învețe animații CSS, abordând @keyframes, animația și tranzițiile.
Învață CSS
Cursul „Learn CSS” de la Codecademy te învață să folosești CSS pentru a transforma paginile HTML în site-uri web atractive vizual. Cursul este structurat în 8 lecții, cu 6 proiecte pentru a evalua cunoștințele.
Acest curs te va învăța cum să adaugi stil elementelor HTML, cum să conectezi fișiere HTML și CSS și cum să creezi structuri unice pentru pagini web.
Construiește-ți Prima Pagină Web cu HTML și CSS
Acest curs te învață cum să folosești HTML5 și CSS3 pentru a crea site-uri web adaptabile. Este un curs gratuit structurat în 4 module, care necesită aproximativ 10 ore pentru a fi finalizat. Nu este necesară experiență anterioară în programare.
Elementele de Bază ale CSS
Cursul „CSS Basics” este oferit de W3Cx. Veți învăța cele mai bune practici în design web, selectoare CSS fundamentale și proprietățile CSS. Cursul este structurat în 5 module, cu o durată de aproximativ 5 săptămâni (studiu de 5-7 ore pe săptămână).
Introducere în CSS3
Acest curs despre CSS3 prezintă foile de stil în cascadă. Este oferit de Universitatea din Michigan și te învață cum să scrii reguli CSS, cum să stabilești obiceiuri bune de programare și cum să testezi codul. Cursul necesită aproximativ 12 ore pentru finalizare și oferă un certificat la final.
Introducere în HTML și CSS
Acest curs introductiv despre HTML și CSS te învață să creezi site-uri web stilizate și bine structurate folosind ambele limbaje. Veți învăța cum să creați structura site-ului (folosind HTML) și cum să o stilizați (folosind CSS).
Este un curs gratuit, potrivit pentru începători, cu un program flexibil, predat de experți din domeniu, care necesită aproximativ 3 săptămâni pentru finalizare.
Tutorial CSS
Acest tutorial CSS gratuit este oferit de W3Schools. Este structurat în capitole, pentru o înțelegere ușoară. Fiecare capitol include exemple și exerciții. Platforma oferă și un mediu online de testare, unde puteți experimenta cu diverse concepte.
CSS: Ghidul Definitiv
Cartea „CSS: Ghidul Definitiv” este ideală pentru a înțelege elementele de bază ale CSS, de la selectoare, specificitate și cascadă, până la flexbox, poziționare și tehnici de float.
Cartea detaliază, de asemenea, modul de utilizare a CSS pentru transformări 2D și 3D, tranziții și animații. „Ghidul Definitiv” este disponibil atât în format Kindle, cât și în format tipărit.
Web Design Adaptabil cu HTML5 și CSS
Această carte te învață cum să creezi site-uri web adaptabile pentru toate dispozitivele (desktop, tablete, mobile) folosind HTML5 și CSS. Cartea este scrisă într-un format ușor de urmărit și este disponibilă în format tipărit și Kindle.
HTML și CSS: Proiectarea și Construirea de Site-uri Web
Această carte este recomandată tuturor, indiferent dacă sunteți pasionat, student sau profesionist. Autorul folosește elemente grafice și fotografii pentru a facilita înțelegerea diferitelor concepte. Cartea este prezentată într-o structură unică, care face ușoară navigarea prin capitole.
CSS Modern
Cartea „CSS Modern: Stăpânește Conceptele Cheie ale CSS pentru Dezvoltarea Web Modernă” te învață CSS prin exemple de cod, diagrame și capturi de ecran.
Cartea prezintă inițial elemente de bază (culori, selectoare, modelul cutiei, combinatoare, specificitate), apoi abordează elemente mai complexe (stilizarea textului, poziționarea, gradientele, marginile, indexul Z). În capitolele finale sunt introduse subiecte avansate (tranziții, animații, transformări, flexbox și CSS grid).
Concluzii
Importanța CSS în dezvoltarea site-urilor web moderne nu poate fi contestată. Pe lângă îmbunătățirea aspectului vizual al paginilor, CSS facilitează navigarea pe diferite secțiuni ale unui site.
Învățarea CSS poate fi ușoară folosind resursele menționate mai sus. Unele cursuri sunt gratuite, altele necesită o plată.
Pentru a facilita lucrul cu CSS, puteți consulta diverse cheat sheets (documente cu referințe rapide).