CSS Alapok: A Weboldalad Dizájnja
A HTML kurzusban megtanultuk, hogyan építsük fel egy weboldal logikai szerkezetét és csontvázát. Ha csak HTML-t használsz, az oldalad úgy fog kinézni, mint egy 1995-ös egyetemi dokumentum: fekete szöveg, fehér háttér, kék linkek. Itt lép a képbe a CSS.
Mi az a CSS?
A CSS (Cascading Style Sheets, azaz Lépcsőzetes Stíluslapok) egy stílusleíró nyelv. Ennek segítségével mondjuk meg a böngészőnek, hogy a HTML elemek hogyan jelenjenek meg a képernyőn, papíron, vagy más médián.
A CSS felel a színekért, a betűtípusokért, az elemek méretéért, az elrendezésért (layout), és a reszponzivitásért (hogy az oldal mobilon és asztali gépen is tökéletesen mutasson).
A legfontosabb elv: Separation of Concerns
A modern webfejlesztés egyik legszentebb szabálya a "Felelősségi körök szétválasztása" (Separation of Concerns). Ez azt jelenti, hogy a tartalmat és a dizájnt soha nem keverjük össze.
- A HTML feladata: A tartalom és a struktúra meghatározása (Mi ez az adat?).
- A CSS feladata: A vizuális megjelenés meghatározása (Hogyan nézzen ki?).
A 2000-es évek elején a fejlesztők még HTML tagekkel formáztak (például a <font color="red"> vagy a <center> tagekkel). Ezeket a tageket a HTML5 szabvány hivatalosan is elavultnak (deprecated) nyilvánította. Ma már szigorúan tilos a HTML-t dizájnolásra használni. Minden vizuális módosítást a CSS-nek kell elvégeznie.
Miért "Lépcsőzetes" (Cascading)?
A CSS nevében a "Cascading" szó a szabályok öröklődésére és felülírására utal. Képzelj el egy vízesést: a fentről érkező víz (szabály) lefelé folyik, és mindenre hatással van, ami alatta van, hacsak egy újabb kő (egy erősebb szabály) meg nem változtatja az irányát.
Ha a weboldalad legfőbb elemének (a <body>-nak) adsz egy kék betűszínt, akkor az oldalon lévő összes bekezdés, lista és címsor kék lesz (öröklik a színt), egészen addig, amíg egy konkrét bekezdésnek meg nem mondod, hogy "te viszont legyél piros". Ezt a hierarchiát a következő leckékben fogjuk a legmélyebb szintig kivesézni.