Aby náš XHTML dokument využíval CSS je nutno mu to nějak sdělit. Nejvhodnějším způsobem je
uložit seznam CSS do samostatného souboru (např. style.css) a do hlavičky
XHTML tento soubor specifikovat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title>Moje stránka</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
Jak vidíme z příkladu, na externí CSS odkazujeme značkou <link>. Atribut
href v sobě nese cestu k souboru. Povšimněte si atributu media. Ten
slouží pro rozlišení různých definic stylů pro různá zařízení. V našem případě definujeme jiné
styly pro obrazovku (screen) a jiné pro tiskárnu (print). Proč je zřejmé -
při tisku pak můžeme vypnout některé prvky, které se zobrazují na obrazovce ale pro tisk jou
nepodstatné, např. obrázky nebo reklamní bannery. Médií použitelných v tomto atributu je celá řada,
kromě zmiňovaných stojí za pozornost ještě handheld pro příruční zařízení.
Souborů s definicemi stylů můžeme vložit i více najednou. Pak samozřejmě funguje pravidlo kaskády a uvedené styly se mohou doplňovat případně může jeden předefinovávat druhý.
V praxi se však externí soubory vkládají ještě jiným způsobem. A to pomocí příkazu
@import. Význam je jednoduchý - odřízneme tím starší prohlížeče (rozuměj Internet
Explorer 4.0 a Netscape 4.x) od stylových souborů. Jejich podpora CSS je opravdu špatná a proto je
lepší je odříznout (případně jim definovat styly jiné) než je nechat stránku zobrazit. Všechny nové
prohlížeče se s tímto způsobem poradí.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title>Moje stránka</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style-simple.css" />
<style media="screen" type="text/css">
@import 'style.css';
</style>
</head>
Nakonec uvedeme poslední zajímavost a tou je filtrace prohlížeče Microsoft Internet Explorer. Ten je známý tím, že si některé CSS konstrukce zpracovává po svém a některé vůbec nepodporuje. Můžeme však jednoduchou fintou rozlišit styl, který bude pro něj specifický a ostatní prohlížeče jej přeskočí.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title>Moje stránka</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" media="screen" href="style-msie.css" />
<![endif]-->
</head>
CSS je možné také vkládat přímo do hlavičky XHTML souboru, kde je obalíme značkou
<style>. Tato metoda není doporučovaná, protože znesnadňuje údržbu - pokud
bychom chtěli třeba změnit barvu všech titulků na modrou, museli bychom projít všechny XHTML
soubory a provést změnu. To samé platí pro tzv. inline definování stylů, kdy
definici připojíme přímo ke značce atributem style.
Vkládejte vždy CSS z externích souborů. Usnadníte si tím údržbu webu - jakoukoliv změnu stylu celého webového serveru můžete provést pouhým přepsáním jednoho řádku v CSS.