Úvod

V rámci HTML/XML by značky (tagy) měly sloužit především k popisu sémantiky (čili významu) příslušného úseku dokumentu, nikoli ke způsobu jeho zobrazení v cílovém programu. Vezměmě si kupříkladu následující výsek XML-dokumentu: 

  <h3> nadpis úrovně 3 </h3>
  <ol>
    <li> položka seznamu č. 1 </li>
    <li> položka seznamu č. 2 </li>
    <li> položka seznamu č. 3 </li>
  </ol>

Uvědomíme-li si následující anglické termíny - heading, ordered list, list item - je význam jednotlivých použitých elementů jasný. Jejich konkrétní zobrazení pak ovšem závisí na použitém kontextu a aplikaci. Je-li výše uvedený fragment XML součástí HTML-dokumentu a podíváme-li se na něj HTML-prohlížečem, bude nadpis proveden tučným fontem o větší velikosti než zbytek textu a jednotlivé položky seznamu budou odsazeny od levého okraje a vzestupně číslovány (počínaje jedničkou):

nadpis úrovně 3

  1. položka seznamu č. 1
  2. položka seznamu č. 2
  3. položka seznamu č. 3

Stejný kód ovšem stejně tak dobře může být součástí nějakého XML-jazyka určeného pouze pro strojové zpracování dat a v tom případě nebude mít přiřazen vůbec žádný způsob zobrazení.

Obecně se pro přiřazení pravidel pro zobrazení (případně též reakci na jisté události uživatele a méně často i zvukovou reprezentaci) používá na XML nezávislý jazyk CSS (Cascading Style Sheets). Ten pomocí systému speciálních selektorů vybírá elementy v cílovém dokumentu, na něž pak aplikuje předepsaná pravidla. Kupříkladu následující CSS-kód 

  h3 {
    font-size: 100%;
    text-decoration: underline;
    text-transform: uppercase;
  }
  li {
    display: inline;
    border: thin dotted gray;
  }

způsobí následující změnu ve vzhledu výše uvedené ukázky kódu:

nadpis úrovně 3

  1. položka seznamu č. 1
  2. položka seznamu č. 2
  3. položka seznamu č. 3

Zde uvedená CSS-pravidla vyberou v cílovém dokumentu elementy se jmény h3 a li a uvedeným způsobem pozmění jejich zobrazení. (Stejně jako u názvů HTML-elementů je výhodou alespoň základní znalost anglického jazyka - jednotlivé CSS-vlastnosti jsou pak víceméně samovysvětlující a jednodušeji zapamatovatelné.)

Přiřazení dokumentu

XML-dokumentu přiřadíme CSS-pravidla pomocí konstrukce 

  <?xml-stylesheet type="text/css" href="stylopis.css"?>

uvedené před kořenovým elementem (a za případnou XML-hlavičkou <?xml version="1.0">). Jak je vidět, musí být zavedena v samostatném souboru stylopis.css.

V HTML-dokumentech máme možností více. Předně (a preferovaně, pokud mají být pravidla sdílena více soubory) je můžeme také zapsat do samostatného souboru a následně se na ně v HTML pouze odkázat konstrukcí (v <head> sekci dokumentu) 

  <link rel="stylesheet" type="text/css" href="stylopis.css">

Podobným způsobem pak můžeme poskytnout třebas speciální pravidla pouze pro obrazovku a jiná pro tisk: 

  <link rel="stylesheet" media="screen" type="text/css" href="stylopis.css">
  <link rel="stylesheet" media="print" type="text/css" href="stylopis.tisk.css">

Tento způsob zavedení CSS-pravidel má tu výhodu, že je součástí HTML-struktury dokumentu, tudiž je zpracován samotným HTML-parserem (tj. zjednodušeně programem zajišťujícím rozpoznání a zpracování zdrojových HTML-dat) a některé prohlížeče díky tomu umožňují jistý stupeň jejich uživatelské obsluhy (např. vyřazení pravidel z provozu, výběr alternativních způsobů zobrazení apod.). Existují však i odpovídající CSS-varianty načtení externích pravidel, z nichž nejjednodušší je konstrukce (preferovaně také v <head> sekci dokumentu) 

  <style type="text/css">
    @import url('stylopis1.css');
    @import url('stylopis2.css');
  </style>

která načte (v uvedeném pořadí) CSS-pravidla ze souborů stylopis1.css a stylopis2.css.

Kromě uvedení pravidel v externích souborech je možno v rámci HTML je uvést též přímo v dedikovaném elementu <style> 

  <style type="text/css">
    ol {
      background-color: gray;
    }
    li {
      background-color: white;
      color: black;
    }
  </style>

případně též pomocí dedikovaného atributu style přímo na cílovém elementu 

  <div style="text-decoration: underline;">

Mějte na paměti, že z pravidel se stejnou prioritou (viz následující kapitola) se aplikují ta, která jsou uvedena později! To znamená, že pokud bude například v souboru stylopis2.css pravidlo 

  li {
    color: red;
  }

zatímco v souboru stylopis1.css pravidlo 

  li {
    background-color: yellow;
    color: black;
  }

přičemž tyto soubory budou načteny ve výše uvedeném pořadí, text v elementech <li> bude vyveden červenou barvou na žlutém pozadí. A pokud některý z elementů <li> ve stránce bude mít na sobě atribut 

  <li style="color: green;">

bude text v něm obsažený zobrazen zeleně.

Na závěr si připomeňme, že CSS-pravidla „probublávají“ ve struktuře dokumentu směrem „dolů a dovnitř“ (v „krabicovém“ jazyce to znamená, že pravidla příslušející jisté „krabici“ jsou automaticky aplikována i na všechny „krabice“ v ní obsažené), tzn. že např. pravidla pro element <body> 

  body { … }

budou aplikována na úplně všechny elementy ve stránce! (Čehož se s výhodou používá např. pro definici jednotného vzhledu písma v celém dokumentu.)

Selektory a priorita

Úplný algoritmus pro výběr, jaká CSS-pravidla se na tom kterém elementu aplikují, je poměrně složitý, dá se však ve většině případů zjednodušit na následující (snad) celkem snadno zapamatovatelné schema:

Poznámka: Pokročilé „atributové“ selektory z připravovaného standardu CSS3 mají podobnou prioritu jako selektory podle třídy.

Selektory se dají nejrůznějšími způsoby kombinovat. Kupříkladu pravidla zavedená následující konstrukcí 

  div, p { … }

budou aplikována na všechny elementy <div> a <p>, zatímco pravidla zavedená touto konstrukcí 

  div p { … }

pouze na elementy <p> vyskytující se jako potomci elementů <div>. Ve stejném duchu pravidla z konstrukce 

  #uvodnik div p.lichy { … }

budou aplikována pouze na elementy <p class="lichy"> (resp. všechny takové elementy <p>, v jejichž seznamu tříd z atributu class se vyskytuje název třídy lichy), které jsou potomky elementů <div>, jež musí být potomky (libovolného) elementu, jehož atribut id má hodnotu uvodnik. (Nu a pokud v dokumentu žádný takový element není, CSS-pravidla se jednoduše nepoužijí.)

CSS-pravidla

Jak je vidět z dosud použitých ukázek, obecná struktura CSS-pravidla je následující: 

  jméno-pravidla: hodnota-pravidla;

Příkladem budiž 

  background-color: white;
  color: #000;
  font-family: serif;
  background: transparent url('pozadi1.png') fixed;

Středníky jsou životně důležité, protože oddělují jednotlivá pravidla od sebe. Je tudíž možno napsat více pravidel na jednu řádku za sebou (což je sice nepřehledné, ale např. pro použití uvnitř atributu style přímo na elementu naopak velice vhodné).

Narozdíl od zdrojového HTML-dokumentu zpracovává CSS-pravidla úplně jiný parser, takže se k nim také jinak chová. Zatímco v rámci HTML platí pravidlo, že elemementy, které HTML-parser nezná, jsou tiše ignorovány, ale jejich obsah (tj. zanořené „krabice“) je dále zpracován, v rámci CSS jsou neznámá (nebo chybně napsaná) pravidla zcela ignorována! U složitějších pravidel (např. pravidlo background výše) tak drobná chybka v jedné z jejich částí způsobí zahození i částí ostatních.

Podobně jako v HTML však můžeme vybrané části CSS-definic z vlastní vůle vyřadit z činnosti jejich zakomentováním: 

  /*font-family: serif;*/
  font-family: sans-serif;

případně využít komentářové konstrukce /* … */ pro poznámky: 

  /* pravidla pro liché odstavce */
  p.lichy { … }
  /*
   *  následují pravidla pro hypetextové odkazy
   */
  a:link { … }
  a:visited { … }
  a:active { … }

Mimochodem tento komentář je možno použít - možná trochu překvapivě - i uvnitř atributu style přímo na elementu.

Poznámky

Při zobrazování v prohlížeči je HTML/XML-dokument vykreslován od levého horního rohu směrem doprava a dolů. Kromě toho, že se jednotlivé prohlížeče liší v (ne)implementaci některých CSS-pravidel, v případě HTML vše navíc komplikuje možnost zpracování non-well-formed struktury, kterou si pochopitelně každý HTML-parser vyloží trošku jinak, protože neexistují standardní pravidla, jak se ke „krabicím s probouranými stěnami“ chovat. Přičtěmež k tomu naprosto neintuitivní box-model z CSS2, díky němuž pravidlo 

  div {
    width: 100%;
    margin: 22px;
    padding: 33px;
  }

s největší pravděpodobností způsobí objevení horizontálního skrolovátka v prohlížeči, protože všechny DIVy budou přesně o 110 pixelů širší než maximálně dostupná šířka, a je celkem jasné, že snaha o naprosto stejné zobrazení dokumentu napříč jednotlivými programy je cesta do blázince.

Naštěstí s trochou disciplíny a znalostí slabostí jednotlivých prohlížečů (což je právě to, z čeho budete šílet, ale za co vás s největší pravděpodobností budou případně platit :) se dá rozumný CSS-dizajn navrhnout a udržet „čitelný“ a přehledný.

Mimochodem zdrojový kód této stránky vypadá přibližně takto: 

  <body>
    <div id="navi">
      …
    </div>
    <div id="content">
      …
    </div>
  </body>

Při nedostupnosti (nebo vypnutí) podpory CSS v prohlížeči bude ve stránce zobrazena nejdříve navigace a poté za ní vlastní obsah stránky. Pokud bude podpora CSS k dispozici, „zabere“ si pro sebe navigace sloupeček na pravé straně o šířce 20 % dostupného místa a bude viditelná i při skrolování dokumentu. Pravidla, která to mají na starosti, vypadají takto: 

  #navi {
    width: 20%;
    position: fixed; right: 1em;
  }
  #content {
    width: 80%;
  }

DIV navi bude díky pravidlům position: fixed; right: 1em; umístěn fixně u pravého okraje stránky a protože oba DIVy (navi a content) jsou blokové elementy, rozdělí si díky uvedeným pravidlům dostupnou šířku stránky v poměru 1:4. Řešení to ale není ani náhodou ideální - zkuste si hodně změnit velikost okna prohlížeče!