16.2. Tabulka CSS a kaskáda

Seznamy pravidel tvoří tabulku stylů. Pravidla se uvádějí za sebou. Prohlížeč je pak postupně prochází a když najde prvek XHTML dokumentu, který vyhovuje danému selektoru, aplikuje na něj definované hodnoty.

ikona
body { background-color: #ffffff; }
#header { color: #000000; background-color: #cccccc; }
h1.main { font-size: 150% }
/* komentar */
p { color: blue }
p.note { color: red }

Prvky mohou mít definovanou vlastnost na více místech současně. Při jejich zpracování pak mají přednost ty přesnější pravidla před obecnějšími. Ve výše uvedeném příkladě definujeme dvě pravidla pro p. Pokud do XHTML kódu uvedeme <p class="note">, bude použito pravidlo druhé, protože je konkrétnější a odstavci bude přidělena barva červená.

Pokud jsou definovány stejné konkrétní definice téže vlastnosti, záleží na pořadí.

ikona
p { color: green; }
p { color: red; }

V tomto případě se uplatní druhé pravidlo a barva odstavce se nastaví na červenou.

ikona
Důležité:

Zvykněte si psát každé pravidlo na samostatný řádek. Velmi vám to usnadní orientaci ve stylech.