Jednoduchý štýl CSS
Najjednoduchší kaskádový štýl môže vyzerať napr. takto:
h1 { color: blue}
význam zápisu : Všetky nadpisy vytvorené pomocou elementu h1 budú mať modrú farbu.
V našom prípade je celý štýl tvorený len jedným pravidlom. Každé pravidlo má dve časti – selektor (h1) a deklaráciu (color: blue)
Selektor určuje elementy, na ktoré bude deklarácia aplikovaná. Každá deklarácia sa skladá z dvoch častí – z vlastnosti a jej hodnoty. Deklarácie môžeme združovať dokopy, pokiaľ ich oddelíme pomocou bodkočiarky:
h1 { color: blue; text-align:center}
1. Štýl pre celú stránku zapísaný priamo v HTML dokumente
Tento spôsob využijeme v prípadoch, kedy chceme definovať vzhľad len jednej stránky a neplánujeme použitie štýlov na ďalších stránkach. Štýl sa vkladá do záhlavia dokumentu do elementu <style>. Pomocou atribútu
type musíme určiť typ používaného štýlového jazyka.
2. Špecifikácia štýlu priamo v elemente dokumentu
Táto možnosť definovania štýlu trošku odporuje samotnej filozofii štýlu, ktorá sa snaží oddeliť definíciu vzhľadu od samotného obsahu dokumentu. V každom elemente môžeme používať atribút style a v ňom priamo uvádzať deklaráciu štýlu.
3. Pripojenie štýlu z externého súboru
Tento prípad je najvyužívanejší, pretože umožňuje využiť jeden štýl v na niekoľkých stránkach. Štýl sa k stránke pripája pomocou elementu link, ktorý môže byť umiestnený v záhlaví stránky.
Alternatívne štýly
K stránke môžu byť pripojené aj viaceré štýly naraz a užívateľ si môže medzi nimi prepínať.
Väčšina webových prehliadačov však neponúka možnosť prepínania štýlov a ani si zmenu štýlu nepamätá pri prechode medzi stránkami, musí sa preto riešiť cez JavaScript.
Zhrnutie:
| Umiestnenie CSS | Umiestnenie vlastnosti CSS | Zápis | Platnosť |
|---|---|---|---|
| Lokálne | V elementoch | <div style=”color: green;”> </div> |
Iba pre jeden element |
| Interné | V hlavičke | <style type=“text/css“> div {color: green;} </style> | jedna stránka |
| externé | Externý súbor CSS | div {color: green;} | Jedna a viac stránok |
