Primul style.css: pagina prinde culoare

Pagina „Clasa noastră" de săptămâna trecută funcționează, dar arată ca un document din 1995: text negru pe alb, font de sistem, nimic al vostru. Azi îi scrii hainele: un fișier style.css care schimbă culori, fonturi și pune chenare — fără să atingi aproape deloc HTML-ul. La finalul laboratorului vei avea proiectul cu două fișiere, conținut și stil separate, exact cum sunt construite site-urile adevărate.

Ce îți trebuie

VS Code și folderul clasa-noastra de la laboratorul trecut, cu index.html funcțional. Dacă ai lipsit, scheletul din laboratorul 7 se reface în 10 minute — fă-l întâi.
Browser, pentru ritmul știut: salvezi, reîncarci, vezi.
Timp: 45 de minute — 10 pentru legătura HTML–CSS, 20 pentru stiluri, 15 pentru misiune.

Pasul 1: fișierul de stil și legătura

CSS-ul trăiește în fișierul lui. Un singur rând în HTML le leagă.

În VS Code, în folderul proiectului, creează fișierul style.css — lângă index.html, nu în alt folder.
În index.html, în interiorul lui head, sub linia cu title, adaugă:

<link rel="stylesheet" href="style.css">

Ca să verifici legătura înainte de orice altceva, scrie în style.css ceva imposibil de ratat:

body {
    background-color: yellow;
}

Salvează ambele fișiere (Ctrl + S în fiecare), reîncarcă pagina.

Citirea regulii de mai sus, cuvânt cu cuvânt: body e selectorul — cine primește stilul; între acolade stau proprietățile — ce anume se schimbă; background-color e proprietatea, yellow valoarea, iar punctul și virgula închide fiecare linie. Toate regulile CSS pe care le vei scrie vreodată au forma asta.

Pasul 2: paleta și fontul

Galbenul de test pleacă, stilul adevărat vine. Înlocuiește conținutul lui style.css cu:

body {
    background-color: #f4f1ea;
    color: #2b2b2b;
    font-family: Verdana, Arial, sans-serif;
    margin: 40px;
}

h1 {
    color: #1a5c8a;
}

h2 {
    color: #1a5c8a;
    border-bottom: 2px solid #1a5c8a;
}

Ce e nou aici:

Culorile ca #1a5c8a sunt coduri hex — rețeta exactă a unei culori. În VS Code, dă clic pe pătrățelul colorat care apare lângă cod: se deschide un selector din care alegi orice nuanță, iar codul se rescrie singur. Alege-ți propriile culori — două, maximum trei pe toată pagina; paginile cu opt culori strigă și nimeni nu le ascultă.
font-family dă o listă de fonturi: browserul îl folosește pe primul pe care îl are instalat, de-asta lista se termină cu plasa de siguranță sans-serif.
border-bottom la h2 trage o linie sub fiecare subtitlu — trei valori: grosime, tip, culoare.

Pasul 3: chenare și spații

Elementele câștigă contur:

img {
    border: 3px solid #1a5c8a;
    border-radius: 8px;
}

ul, ol {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 20px 40px;
}

border-radius rotunjește colțurile — micul detaliu care desparte „temă de școală" de „arată bine".
Selectorul ul, ol cu virgulă aplică aceeași regulă ambelor tipuri de liste.
padding e spațiul dintre chenar și conținut, pe interior: prima valoare sus-jos, a doua stânga-dreapta. Scoate-l o clipă și reîncarcă, pune-l la loc — diferența pe care o vezi e exact ce înseamnă padding.

Salvează, reîncarcă, apoi fă un pas înapoi de la ecran și privește pagina întreagă, ca un vizitator, nu ca autorul ei. Ce te zgârie? Aia repari.

Dacă nu merge

Niciun stil nu se aplică. Verifică pe rând: numele din href e exact style.css; linia link e în head, nu în body; ambele fișiere sunt în același folder; ambele sunt salvate. În 9 cazuri din 10, e una dintre astea patru.
O regulă anume nu are efect. Punct și virgulă lipsă pe linia de dinainte sau o acoladă neînchisă mai sus — de acolo în jos, browserul ignoră tot. VS Code îți colorează dubios zona cu probleme; derulează fișierul și caută perechea fiecărei acolade.
Culoarea scrisă nu e culoarea afișată. Codul hex are 6 caractere după diez, doar cifre și litere a–f. #1a5c8g nu e o culoare (g nu există în hex) și browserul o aruncă fără să se plângă.
Fontul nu se schimbă. Numele fontului cu spații trebuie pus între ghilimele: "Comic Sans MS". Și dacă tot ai scris Comic Sans: ești sigur?
Merge în VS Code (preview), nu merge în browser. Nu te uita la preview-uri — sursa adevărului e browserul cu F5 proaspăt apăsat.

Misiunea ta

Nivel de bază (obligatoriu): pagina stilizată complet — fundal, culoare de text, font, titluri colorate, h2 cu linie, imagine cu chenar rotunjit, liste pe carduri albe — cu paleta ta, nu cu a mea.

Extindere: stilizează linkul din extinderea laboratorului trecut: selectorul a cu color la alegere și, pe hover:

a:hover {
    background-color: #1a5c8a;
    color: #ffffff;
}

Treci cu mouse-ul peste link în browser — prima ta pagină interactivă.

Provocare: modul întunecat. Fă o copie a proiectului (tot folderul), iar în copie inversează paleta: fundal închis, text deschis, aceleași culori de accent. Compară-le una lângă alta și decide argumentat care rămâne „oficială". Vei descoperi că nu e suficient să inversezi — unele culori trebuie reajustate. De ce?

Ai terminat când:

tot stilul stă în style.css — zero culori sau fonturi scrise în index.html;
schimbarea unei singure reguli (de exemplu culoarea din h2) se vede instant în toate locurile potrivite din pagină;
un coleg care îți vede pagina poate numi cele 2–3 culori ale paletei tale — semn că paleta există, nu s-a întâmplat.