Každý XHTML prvek má definované určité vlastnosti, které určují jeho vzhled. Každá z těchto vlastností má svůj jednoznačný název a svoji hodnotu. Tyto hodnoty můžeme v tabulkách CSS předefinovávat a tím měníme vzhled XHTML elementů.
Hodnotu přiřazujeme vlastnosti zápisem vlastnost:hodnota
. Tyto údaje píšeme do
tzv. pravidel.
Prvky, na které se vztahují definice označují selektory. Základním
selektorem je název prvku, např. p
, div
apod. Pokud jej předefinujeme, pak se toto pravidlo vztahuje na všechny výskyty tohoto prvku v
dokumentu. Konstrukce h1 { color: red; }
nastaví červenou barvu vše prvkům
h1
v dokumentu.
Druhá možnost je definice třídy. Zapisuje se tečkou za
jménem prvku a je jí přiřazen jedinečný identifikátor. Např. konstrukce h1.nadpis { color:
red; }
předefinuje jen ty prvky h1
, které obsahují identifikátor
nadpis
v atributu class
a , tedy vypadají takto <h1
class="nadpis">titulek</h1>
. Pokud v selektoru vynecháme jméno prvku, bude pravidlo
platit pro všechny prvky s danou třídou. Např. .poznamka
se bude vztahovat na
jakýkoliv prvek, který obsahuje atribut class="poznamka".
Třetí možností je prvek s daným pojmenováním. Každý prvek v
XHTML dokumentu totiž můžeme pojmenovat atributem id
a přiřadit mu identifikátor. V
CSS stylu se pak na tento prvek odkazujeme pomocí selektoru #
. Např. div
id="blok"
předefinujeme pomocí div#blok { color: blue; }
. Název prvku před
selektorem můžeme vynechat.
Často se také využívá následnický selektor. Používá se k
tomu operátor mezera. Např. pokud chceme předefinovat všechny prvky strong
, které jsou
jen uvnitř p
, zapíšeme to konstrukcí p strong {color: red;}
. Takových
selektorů lze použít víc za sebou, takže můžeme styl přiřadit libovolnému prvku.
Selektorů existuje celá řada - můžeme se dále odkazovat na potomky a následníky prvků, můžeme selektory kombinovat apod.
I kaskádové styly můžeme validovat nástrojem od konsorcia W3C. Nalézá se na adrese http://jigsaw.w3.org/css-validator/. Pokud naše styly budou bez chyb, máme právo si na web umístit ikonku potvrzující tuto skutečnost.