CSS - Notiuni de baza

CSS (Cascading Style Sheets, „foi de stil în cascadă”) este limbajul cu care stabilești aspectul unei pagini web: culori, fonturi, dimensiuni, spații, chenare, fundaluri și așezarea elementelor pe ecran. HTML descrie ce conține pagina (titluri, paragrafe, liste, imagini), iar CSS descrie cum arată acest conținut.

CSS nu este format din „etichete”, ca HTML, ci din reguli. Un fișier CSS este un simplu fișier text cu extensia .css, pe care îl creezi în orice editor de cod.

Avantajele separării aspectului de conținut:

• stilurile se scriu într-un singur loc și se aplică tuturor paginilor site-ului;
• modificările se fac rapid: schimbi o culoare într-o regulă și se schimbă peste tot;
• codul HTML rămâne curat și mai mic, iar fișierul CSS este descărcat o singură dată și păstrat în memoria browserului (cache), deci paginile se încarcă mai repede;
• aceeași pagină poate arăta diferit pe ecrane mari, pe telefoane sau la tipărire.

Sintaxa unei reguli CSS

O regulă CSS are două părți: selectorul, care alege elementele din pagină, și un bloc de declarații între acolade. Fiecare declarație este o pereche proprietate: valoare și se încheie cu punct și virgulă:

selector {
  proprietate: valoare;
  proprietate: valoare;
}

p {
  color: navy;
  font-size: 1.125rem;
}

Regula de mai sus face albastru-închis și puțin mai mare textul tuturor paragrafelor. Punctul și virgula după ultima declarație este opțional, dar e bine să-l pui mereu, ca să nu uiți de el când adaugi o declarație nouă. Spațiile și rândurile noi nu contează; scrierea pe mai multe rânduri, ca mai sus, face însă codul ușor de citit.

Câteva tipuri de valori pe care le vei întâlni des: lungimi (16px, 1.5rem, 2em, 50%, 100vw), culori (red, #1a5fb4, rgb(26 95 180), hsl(214 75% 40%) – vezi și codurile culorilor) și cuvinte cheie (bold, center, none).

Cele trei moduri de a adăuga CSS într-o pagină

1. Fișier extern (recomandat)

Regulile se scriu într-un fișier separat, de exemplu stil.css, iar fiecare pagină îl încarcă cu eticheta <link> pusă în <head>:

<head>
  <meta charset="utf-8">
  <title>Pagina mea</title>
  <link rel="stylesheet" href="stil.css">
</head>

Atributul rel="stylesheet" spune că fișierul legat este o foaie de stil, iar href indică adresa lui (relativă sau completă). Atributul type="text/css", obligatoriu în HTML 4, nu mai este necesar în HTML5, unde CSS este tipul implicit. Este metoda folosită pe orice site real: toate paginile împart același fișier.

2. Eticheta <style> în pagină

Regulile se pot scrie direct în pagină, într-un element <style> pus în <head>. Ele se aplică doar paginii respective:

<style>
  p { color: darkgreen; }
  strong { color: crimson; }
</style>
<p>Un paragraf verde cu un cuvânt <strong>important</strong>.</p>
<p>Al doilea paragraf primește aceeași regulă.</p>

În paginile vechi vei vedea conținutul lui <style> încadrat între <!-- și -->, ca să fie ascuns de browserele de dinainte de anul 2000 care nu cunoșteau CSS. Acest truc este depășit și nu mai trebuie folosit.

3. Atributul style (inline)

Declarațiile se pot pune direct pe un element, în atributul style. Aici nu există selector și nici acolade, doar declarații:

<p style="color: white; background: steelblue; padding: 8px;">
  Paragraf stilizat direct cu atributul style.
</p>
<p>Paragraf fără stil.</p>

Stilul inline este comod pentru o probă rapidă, dar e greu de întreținut (trebuie modificat element cu element) și amestecă din nou aspectul cu conținutul. Folosește-l rar, de regulă doar pentru valori calculate sau excepții punctuale.

Cascada: care regulă câștigă

Se întâmplă des ca mai multe reguli să stabilească aceeași proprietate pentru același element. Browserul alege valoarea după câteva criterii, în ordine:

1. Importanța: o declarație marcată cu !important învinge declarațiile obișnuite. E un instrument de urgență; folosit des, face stilurile greu de controlat.
2. Specificitatea selectorului: un stil inline (atributul style) este mai specific decât orice selector, un selector de id (#meniu) este mai specific decât unul de clasă (.nota), iar acesta mai specific decât unul de etichetă (p). Detalii în articolul despre id și class.
3. Ordinea: la specificitate egală, câștigă regula scrisă ultima.

Atenție la o idee greșită răspândită: nu contează dacă regula vine dintr-un fișier extern sau din <style>. Contează doar ordinea în care apar în pagină. Dacă pui <style> înaintea lui <link>, regulile din fișierul extern sunt citite ultimele și le înlocuiesc pe cele cu aceeași specificitate.

<style>
  p { color: blue; }
  p { color: green; }
  .nota { color: darkorange; }
</style>
<p>Verde: a doua regulă pentru p o înlocuiește pe prima.</p>
<p class="nota">Portocaliu: selectorul de clasă e mai specific.</p>
<p class="nota" style="color: purple;">Mov: stilul inline e cel mai specific.</p>

Moștenirea

Unele proprietăți se moștenesc: dacă le stabilești pe un element, se aplică și elementelor din interiorul lui. Așa se comportă proprietățile legate de text (color, font-family, font-size, line-height). Altele, ca border, margin, padding sau background, nu se moștenesc. De aceea e suficient să stabilești fontul și culoarea textului o singură dată, pe body:

body {
  font-family: system-ui, sans-serif;
  color: #222;
  line-height: 1.5;
}

Comentarii

Comentariile CSS se scriu între /* și */ și pot ocupa unul sau mai multe rânduri. Browserul le ignoră. CSS nu are comentarii pe un rând cu //, ca alte limbaje.

/* Culorile principale ale site-ului */
a {
  color: #1a5fb4; /* albastru pentru linkuri */
}

/*
  Un comentariu
  pe mai multe rânduri
*/

Selectori de bază

Selectorul decide căror elemente li se aplică regula. Cei mai folosiți:

<style>
  h3, h4 { font-family: Georgia, serif; color: #1a5fb4; }
  .nota { background: #fff3c4; padding: 4px 8px; }
  #final { font-weight: bold; }
  em { color: crimson; }
</style>
<h3>Titlu</h3>
<h4>Subtitlu</h4>
<p class="nota">Un paragraf cu clasa <em>nota</em>.</p>
<p id="final">Paragraful cu id-ul final.</p>

Selectorii de clasă și id sunt explicați pe larg în Elementele id și class, iar diferența dintre elementele bloc și cele în linie, în div, span și etichete CSS.

Verificarea codului CSS

Dacă un browser întâlnește o proprietate sau o valoare pe care nu o înțelege, ignoră doar acea declarație și continuă cu restul, fără să afișeze vreo eroare. De aceea greșelile de scriere trec ușor neobservate. Le poți găsi cu instrumentele pentru dezvoltatori ale browserului (tasta F12, fila Elements / Inspector, unde declarațiile invalide apar tăiate) sau cu validatorul oficial W3C CSS Validator. Lista proprietăților o găsești în Proprietăți CSS.