Narozdφl od HTML, kde se pomocφ kaskßdov²ch styl∙ jen tu a tam upravil vzhled n∞kterΘ Φßsti strßnky, vy₧aduje pou₧itφ CSS v kombinaci s XML mnohem peΦliv∞jÜφ p°φstup. Standardn∞ se toti₧ XML dokument zobrazuje jako jeden dlouh² odstavec bez ₧ßdnΘho formßtovßnφ. Stylem bychom proto m∞li nastavit formßtovßnφ pro ka₧d² element, kter² se v dokumentu vyskytuje.
Nejd°φve ze vÜeho se musφme u ka₧dΘho elementu rozhodnout, jak se bude zobrazovat û zda jako samostatn² odstavec nebo jako souΦßst odstavce. Podle toho se elementy rozliÜujφ na tzv. blokovΘ a inline. Mezi blokovΘ pat°φ odstavce, nadpisy, obrßzky a dalÜφ. Je pro n∞ typickΘ, ₧e p°ed nimi a za nimi je zalomen tok textu. Inline elementy obvykle zp∙sobujφ pouze zm∞nu pφsma.
RozliÜenφ blokov²ch a inline element∙ se d∞je pomocφ vlastnosti display, kterß m∙₧e mφt hodnotu block nebo inline. Pro nßroΦn∞jÜφ formßtovßnφ m∙₧eme °φci, ₧e n∞jak² element se mß pova₧ovat za tabulku, °ßdku tabulky nebo bu≥ku tabulky. P°φsluÜnß Φßst dokumentu se pak zformßtuje jako tabulka.
Po definovßnφ zßkladnφho zp∙sobu zobrazenφ si m∙₧eme vyhrßt s nastavenφm dalÜφch vlastnostφ, kterΘ ovliv≥ujφ barvy, velikost, zp∙sob zarovnßnφ, pou₧itΘ pφsmo apod.
My si vÜe ukß₧eme na jednoduchΘm dokumentu, kter² obsahuje XML podobu jednoduchΘho cenφku.
P°φklad 1. Ukßzkov² XML dokument
<?xml version="1.0" encoding="windows-1250"?>
<?xml-stylesheet href="cenik.css" type="text/css"?>
<cenik>
<nazev>Nab￭dka procesor pro levn￩ PC</nazev>
<platnost>plat￭ do 30.5.2000</platnost>
<kontakt>V p￭pad￬ z￡jmu, kontaktujte naﾚe obchodn￭ odd￬len￭
na telefonu <tel>02/20304050</tel> nebo pomoc￭ e-mailu
<email>obchod@firma.cz</email>.
</kontakt>
<obsah>
<polozka>
<vyrobce>Intel</vyrobce>
<kategorie>CPU</kategorie>
<nazev>Celeron 333A MHz 128c</nazev>
<cena>3022</cena>
</polozka>
<polozka bomba="ano">
<vyrobce>Intel</vyrobce>
<kategorie>CPU</kategorie>
<nazev>Celeron 333A MHz 128c BOX</nazev>
<cena>1166</cena>
</polozka>
<polozka>
<vyrobce>Intel</vyrobce>
<kategorie>CPU</kategorie>
<nazev>Celeron 366A MHz 128c Box</nazev>
<cena>3821</cena>
</polozka>
<polozka>
<vyrobce>Intel</vyrobce>
<kategorie>CPU</kategorie>
<nazev>Celeron 400A MHZ 128c Box</nazev>
<cena>7117</cena>
</polozka>
</obsah>
</cenik>Pro jeho formßtovßnφ jsme vytvo°ili jednoduch² styl, kter² prakticky ilustruje pou₧itφ kaskßdov²ch styl∙. V²slednΘ zobrazenφ v prohlφ₧eΦi zachycuje obrßzek 1.
P°φklad 2. Styl v jazyce CSS û cenik.css
/* Spole￨n￩ vlastnosti pro cel� dokument */
cenik { display: block;
background-color: white;
font-family: Verdana, Helvetica, sans-serif;
padding-left: 10px;
padding-right: 10px }
/* Blokov￩ elementy */
cenik > nazev, platnost, kontakt { display: block }
cenik > nazev { font-size: 24pt;
text-align: center;
color: blue;
margin: 10pt }
platnost { font-style: italics;
text-align: center }
kontakt { font-size: smaller;
text-aling: justify;
margin-top: 6pt }
/* Inline elementy */
tel, email { display: inline;
font-weight: bold;
color: red }
/* Tabulka cen￭ku */
obsah { display: table;
padding: 4px;
border: solid;
margin: 20px }
/* Poloﾞky cen￭ku tvo￭ ￡dky tabulky */
polozka { display: table-row }
polozka[bomba] { background-color: yellow }
/* ￚdaje o v�robku tvo￭ buky tabulky */
vyrobce, nazev, cena { display: table-cell;
padding-left: 10px;
padding-right: 10px }
vyrobce { font-style: italic }
nazev { font-weight: bold }
cena { color: #808080;
font-weight: bold }
/* Kategorie se nezobrazuje */
kategorie { display: none }