Printervriendelijke pagina’s maken

Een van de voordelen van CSS is dat je vooraf kunt bepalen hoe je site er uit gaat zien
op het scherm. Maar dit is niet alleen mogelijk voor het scherm, je kunt ook aparte stylesheets
maken voor zogenaamde handhelds of bijvoorbeeld voor spraakprogramma’s. Wat ook handig is
is het onderdeel van CSS speciaal voor een printversie van een pagina.

Eerst even alle media types op een rij.

Natuurlijk kun je een en dezefde stylesheet gebruiken voor alle mediavormen.
Dat doe je als volgt:

<link rel="stylesheet" type="text/css" href="stijl.css" media="all" />

Zo kun je ook twee verschillende mediatypen aanspreken, eenvoudigweg door een komma
te gebruiken, dat is dus als volgt:

<link rel="stylesheet" type="text/css" href="print.css" media="print,projection" />

In bovenstaand voorbeeld wordt het betreffende stijlblad weergegeven als de pagina wordt
geprojecteerd, of als er een afdruk via de computer van wordt gemaakt. Overigens kun je
deze manier ook aanroepen met @import, dat gaat dan als volgt:

@import url(print.css) print,projection;

Wanneer je meerdere media in een stijlblad wilt hebben, kun je dat ook nog als volgt doen:

<style type="text/css">
@media print {
body {
font-size: 12px;
color: black;
background-color: white;
}
}
@media screen {
body {
font-size: medium;
color: white;
background-color: black;
}
}
</style>