V levém sloupci je prostor pro hlavní menu, vyhledávací formulář, atd.

Příklad k článku CSS a tisk

Tato stránka vypadá jinak na obrazovce a jinak na vytištěné stránce. Podmínkou ovšem je, že používáte prohlížeč, který umí rozlišit různé definice stylů pro různá média, což je např. MSIE 5+, Mozilla  5+ a Opera 5+. Ve starších prohlížečích uvidíte jak na obrazovce, tak na tiskárně pouze textovou, nijak neformátovanou verzi.

Přesvědčte se sami a zkuste si stránku vytisknout. Zatímco na obrazovce vidíte grafické logo v záhlaví, pod záhlavím tři sloupce a modrý gradient na levém okraji stránky, na výtisku je pouze záhlaví bez loga a obsah tohoto prostředního sloupce roztažený na celou šířku papíru. Navíc jsou pro tisk použity jiné fonty.

Jak je to uděláno

Princip je velmi jednoduchý. Kód stránky je tvořen čistým (X)HTML bez jakýchkoli prezentačních značek a atributů. Vzhled stránky je určen dvěma externími soubory stylů:

  1. samp0202a.css společným pro všechna média (obrazovku i tiskárnu),
  2. samp0202p.css, který slouží pouze pro tisk.

Pro zobrazení na obrazovce se použije jen první soubor stylů. Jakmile však má prohlížeč stránku vytisknout, použije obě definice stylů s tím, že pravidla uvedená v definici pro tisk mají přednost.

Layout stránky je tvořen výhradně prvky <div>. Jejich umístění a formátování řídí definice stylu samp0202a.css. Definice stylu pro tisk pak některé prvky (logo, levý a pravý sloupec) ukrývá pravidlem display:none a pro celou stránku mění definici rodiny a velikosti písma. Šířka celé stránky a středního sloupce, která je pro obrazovku určena pevně v pixelech a vytištěnou stránku by přesáhla, je pro tisk předefinována na plovoucí šířku pravidlem width:100%.