Čo je CSS (Cascading Style Sheets)?
CSS je jazyk na vizuálne formátovanie webstránok — určuje farby, písma, rozloženie a animácie. Kým HTML definuje štruktúru obsahu, CSS určuje, ako tento obsah vyzerá. Bez CSS by všetky weby vyzerali ako jednoduché textové dokumenty.
Definícia CSS (Cascading
Čo je CSS
CSS (z anglického Cascading Style Sheets, po slovensky kaskádové štýly) je jazyk na vizuálne formátovanie webových dokumentov. Konzorcium W3C ho označuje ako jednoduchý mechanizmus na vizuálne formátovanie internetových dokumentov. Kľúčovou myšlienkou CSS je oddelenie obsahu od vzhľadu — HTML kód obsahuje text a štruktúru, CSS určuje ako to celé vyzerá.
CSS prvýkrát navrhol Hakon Wium Lie 10. októbra 1994, keď pracoval s Timom Berners-Lee v laboratóriu CERN. Návrh Berta Bosa bol taktiež vplyvný — stal sa spoluautorom CSS1 a je považovaný za spolutvorcu CSS. Prvá oficiálna špecifikácia CSS1 vyšla 17. decembra 1996 ako odporúčanie W3C.
Verzie CSS
- CSS 1 (1996) — základná práca s písmami, farbami a okrajmi
- CSS 2 (1998) — doplnená o nové možnosti rozloženia a poziciovanie
- CSS 3 (aktuálna) — vyvíjaná ako samostatné moduly, prináša animácie, flexbox, grid layout, media queries a ďalšie moderné funkcie
Ako CSS funguje v praxi
CSS funguje pomocou selektorov a vlastností. Selektor určí, na ktoré HTML elementy sa štýl aplikuje (napríklad všetky nadpisy, konkrétne tlačidlo alebo celá sekcia). Vlastnosti potom definujú vzhľad — farbu, veľkosť písma, odsadenie, pozadie a ďalšie.
CSS je možné presunúť do externých súborov, čím sa zmenší veľkosť HTML dokumentu a jedným súborom sa dá zmeniť celý vizuálny štýl stránky. To výrazne uľahčuje údržbu a aktualizáciu dizajnu.
Prečo je CSS dôležité
- Responzívny dizajn — CSS media queries umožňujú prispôsobiť stránku mobilom, tabletom aj desktopom
- Konzistentný branding — jeden CSS súbor zabezpečí rovnaký vzhľad na celom webe
- Rýchlosť — efektívne CSS znižuje veľkosť stránky a zrýchľuje načítanie
Praktický príklad
Príklad: Reštaurácia mení dizajn svojej webstránky.
Stránka má 15 podstránok (menu, kontakt, rezervácie, galéria...). Bez CSS by ste museli meniť vzhľad na každej stránke zvlášť. S CSS stačí zmeniť jeden súbor — napríklad zmeniť farbu pozadia z bielej na tmavú, zväčšiť písmo alebo pridať animáciu pri prechode myšou nad tlačidlom — a zmena sa prejaví okamžite na všetkých 15 stránkach.
Konkrétne: Kuchár chce pred Vianocami zmeniť farebný motív webu na červeno-zlatý. Webdizajnér upraví niekoľko riadkov v CSS súbore a celý web má nový sviatočný vzhľad — bez zásahu do obsahu stránok.
Často kladené otázky
Čo je CSS a na čo slúži?
CSS (Cascading Style Sheets) je jazyk na vizuálne formátovanie webstránok. Určuje farby, písma, rozloženie elementov a animácie. Kým HTML definuje obsah stránky, CSS hovorí prehliadaču, ako má tento obsah vyzerať.
Aký je rozdiel medzi HTML a CSS?
HTML definuje štruktúru a obsah stránky (nadpisy, odseky, obrázky). CSS definuje vizuálny vzhľad (farby, písma, rozloženie). Spolu tvoria základ každej webstránky — HTML je kostra, CSS je oblečenie.
Čo znamená „kaskádové" v názve CSS?
Slovo „kaskádové" znamená, že štýly sa aplikujú v určitom poradí priority. Ak je pre ten istý element definovaných viac štýlov, prehliadač rozhodne podľa špecificity a poradia, ktorý štýl sa použije.
Čo je CSS3?
CSS3 je aktuálna verzia CSS, ktorá sa vyvíja ako samostatné moduly. Prináša moderné funkcie ako animácie, flexbox a grid layout, gradientové pozadia, zaoblené rohy a media queries pre responzívny dizajn.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.