Capitol gratuit

Introducere în CSS - fundamente și sintaxă

CSS (Cascading Style Sheets) este limbajul care dă viață paginilor web. Dacă HTML-ul este structura (scheletul), CSS-ul este aspectul vizual (pielea, haine...

Introducere

CSS (Cascading Style Sheets) este limbajul care dă viață paginilor web. Dacă HTML-ul este structura (scheletul), CSS-ul este aspectul vizual (pielea, hainele, coafura). Fără CSS, web-ul ar fi o colecție de documente alb-negru cu text formatat implicit.

Cele trei metode de adăugare CSS

1. CSS Inline

Se adaugă direct pe element prin atributul style. Evitați-l - nu este reutilizabil:

<p style="color: #ccac65; font-size: 18px;">Text auriu</p>

2. CSS Intern (Internal)

Se scrie în tag-ul <style> din <head>. Util doar pentru pagini unice:

<head>
<style>
p {
color: #ccac65;
font-size: 18px;
}
</style>
</head>

3. CSS Extern (External) - recomandat

Fișier separat .css legat cu <link>. Aceasta este metoda standard:

<!-- În HTML -->
<head>
<link rel="stylesheet" href="styles.css">
</head>

/* În styles.css */
p {
color: #ccac65;
font-size: 18px;
}

Sintaxa CSS

O regulă CSS are trei componente: selector, proprietate și valoare:

/* Structura unei reguli CSS */
selector {
proprietate: valoare;
alta-proprietate: alta-valoare;
}

/* Exemplu concret */
h1 {
color: #ccac65;
font-size: 2rem;
font-weight: 700;
margin-bottom: 24px;
}

Anatomia regulii CSS

  • Selector - CE element(e) vrem să stilizăm (h1, .clasa, #id)
  • Proprietate - CE aspect vrem să schimbăm (color, font-size)
  • Valoare - CUM vrem să arate (#ccac65, 2rem)
  • Declarație - Perechea proprietate: valoare (color: #ccac65)
  • Bloc de declarații - Totul între acolade { }

Cascada - cum decide CSS-ul ce stil se aplică

„Cascading" din CSS înseamnă că regulile „curg" în ordine și se pot suprascrie. Ordinea de prioritate (de la cea mai slabă la cea mai puternică):

Browser defaults - Stilurile implicite ale browserului (user agent stylesheet)
CSS extern/intern - Fișierele dvs. CSS (ultimul încărcat câștigă)
Specificitate - Selectori mai specifici câștigă (clasă > element)
CSS inline - Atributul style="" pe element
!important - Forțează prioritatea (evitați-l pe cât posibil!)

Specificitate - scorul de prioritate

Specificitatea se calculează ca un scor cu 4 cifre (a, b, c, d):

Selector Specificitate Scor
p (0, 0, 0, 1) 1
.clasa (0, 0, 1, 0) 10
p.clasa (0, 0, 1, 1) 11
#id (0, 1, 0, 0) 100
#id .clasa p (0, 1, 1, 1) 111
style="" (inline) (1, 0, 0, 0) 1000
⚠️ Atenție: Evitați !important - creează probleme de mentenanță. Dacă aveți nevoie să suprascrieți un stil, creșteți specificitatea selectorului sau reorganizați ordinea regulilor.

Moștenirea (Inheritance)

Unele proprietăți CSS se moștenesc automat de la părinți la copii, altele nu:

✓ Se moștenesc
color
font-family, font-size
line-height
text-align
visibility
cursor
✗ NU se moștenesc
margin, padding
border
background
width, height
display
position

Puteți forța moștenirea cu valoarea inherit sau reseta cu initial și unset:

.child {
border: inherit;      /* Forțează moștenirea */
color: initial;       /* Resetează la valoarea implicită */
margin: unset;        /* Resetează: inherit dacă se moștenește, initial dacă nu */
}

Unități de măsură

Unitate Tip Descriere Utilizare
px Absolută Pixeli - valoare fixă Borders, shadows, dimensiuni fixe
rem Relativă Relativ la font-size-ul root (<html>) Font-size, spațiere, layout - cel mai recomandat
em Relativă Relativ la font-size-ul părintelui Padding/margin relativ la text (butoane)
% Relativă Procent din elementul părinte Lățimi fluide, layout responsive
vw / vh Relativă Procent din viewport (lățime/înălțime) Hero sections, full-screen layouts
dvh Relativă Dynamic viewport height Mobile - se adaptează la toolbar-ul browserului
ch Relativă Lățimea caracterului „0" Lățime optimă text (max-width: 65ch)
💡 Regulă de aur: Folosiți rem pentru font-size și spațiere (respectă preferințele utilizatorului), px pentru borders și shadows, % sau fr pentru layout-uri, dvh pentru înălțimi full-screen pe mobile.

Continuați cu restul cursului

Acesta este capitolul 1 din cele 20 ale cursului, cu 7 lecții din 110. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 70 €