Kaskádové styly (CSS – Cascading Style Sheets) pravděpodobně mnoho z vás již zná, protože je lze používat i společně s jazykem HTML. Díky tomu je dnes k dispozici celá řada prohlížečů, které CSS společně s XML podporují. Mezi nejznámější patří nepochybně Internet Explorer 5.0, v mnoha ohledech lepší podporu však nabízí Mozilla a od ní odvozený Netscape Navigator 6.0, na své si přijdou i příznivci prohlížeče Opera v jeho poslední verzi 4.0. Pravdou ovšem je, že úroveň podpory se v jednotlivých prohlížečích liší.
Princip CSS je velice jednoduchý. Do souboru se stylem se zapíše několik pravidel, které definují vzhled jednotlivých částí dokumentu. Zápis pravidla je velice jednoduchý:
nadpis { font-size: 20pt;
text-align: center;
color: blue }První části se říká selektor a slouží k výběru částí dokumentu, na které se má pravidlo použít. V našem případě se pravidlo použije na všechny elementy, které se jmenují nadpis. Za selektorem následuje ve složených závorkách deklarace, která upravuje jednotlivé parametry zobrazení. V našem případě jsme nastavili velikost písma pro nadpis na 20 bodů, zarovnávat se bude na střed a použije se modrá barva písma.
Pro úspěšné použití kaskádových stylů musíme znát vlastnosti, které můžeme nastavovat, a musíme umět vytvářet selektory, které vybírají jednotlivé části dokumentu. Podrobný popis je samozřejmě součástí specifikace kaskádových stylů a naleznete jej i v mnoha knihách zaměřených na tvorbu webových stránek. Skalní příznivci Softwarových novin se mohou podívat do čísel 6, 7 a 8 z roku 1997, kde je o kaskádových stylech článek od Pavla Satrapy.
Omezený prostor časopisu nám neumožňuje podrobně se podívat na jednotlivé vlastnosti a jejich použití, ale v tabulce 1 se alespoň stručně podíváme na nejpoužívanější tvary selektorů. Při použití společně s XML nabízejí totiž selektory větší možnosti než ve spojení s jazykem HTML.
Tabulka 1. Příklady nejpoužívanějších selektorů
| Selektor | Popis |
|---|---|
| * | Vybere všechny elementy. Hodí se v případech, kdy potřebujeme nějakou vlastnost nastavit u všech elementů v dokumentu. |
| para | Vybere všechny elementy para. |
| list item | Vybere všechny elementy item, které jsou potomkem elementu list. V praxi se často používá například pro víceúrovňové seznamy. |
| kapitola > nadpis | Vybere všechny elementy nadpis, které jsou dětmi elementu kapitola, tj. nadpis je přímo vnořen v elementu kapitola. Použití je podobné jako v předchozím příkladě. |
| para:first-child | Vybere element para, pokud je to první dítě svého rodiče. Podle některých typografických škol by mělo být například odsazení prvního odstavce v kapitole jiné než u všech ostatních odstavců. K tomu se dá s výhodou využít právě tento selektor. |
| seznam + tabulka | Vybere všechny elementy tabulka, které bezprostředně následují za elementem seznam. |
| para[zarovnání] | Vybere všechny elementy para, které mají nastaven atribut zarovnání na libovolnou hodnotu. Kaskádové styly díky této vlastnosti mohou reagovat i na hodnoty atributů. |
| para[zarovnání="vlevo"] | Vybere všechny elementy para, které mají atribut zarovnání nastaven na hodnotu vlevo. |
| para[platforma~="Linux"] | Vybere všechny elementy para, které mají v atributu platforma seznam hodnot oddělených mezerami a jednou z těchto hodnot je Linux. |
| kapitola#kap1 | Vybere element kapitola, který má ID nastaveno na kap1. Tento selektor se používá v případech, kdy potřebujeme u několika málo elementů nastavit odlišný vzhled. |
Pro každý element v dokumentu se pak navzájem zkombinují všechna pravidla, která mu podle selektorů vyhovují. Díky této vlastnosti lze styly psát velice rychle.