De CSS van deze site uitgelegd

Printer styles

Katinka Hesselink januari 2006

2017: Deze beschrijving gaat over een oudere verzie van het ontwerp van deze website

De printer-styles worden als volgt aan het HTML-document gekoppeld:

<link title="print" media="print"
rel="stylesheet" href="style_print.css"
type="text/css">

Dit is niet anders dan bij het algemene stylesheet, behalve dat je aan geeft dat het medium: print is. Niet verassend, je moet het alleen even weten. 

Voor het printer-stylesheet neem ik normaal gesproken het algemene stylesheet, om er vervolgens het een en ander aan te veranderen:

body { font-family: Helvetica, sans-serif;
color: #000;
background-color: #fff;}

De hele declaratie voor de achtergrond is weg. Die heb ik vervangen door een eenvoudige witte achtergrond en zwarte letters. Het lettertype heb ik het zelfde gelaten. Het is ook te verdedigen om hier voor een serif lettertje te gaan (zoals times new roman) omdat dat op papier beter leest.

Alle maten die in px (pixels) gegeven waren, zijn vervangen door pt (punten). Pixels zijn voor het scherm gedefinieerd. Punten zijn bedoeld voor print. Verder is er in de tekst-declaraties niet veel veranderd.

p {margin: 0.5em 0;
padding: 10pt 0;
width: 95%;}
p.nadruk
{float: right;
width: 50%;
font-size: 1.5em;
margin: 5pt 0 5pt 15pt;
padding: 5pt;}

ul li {line-height: 1.4;}

pre, blockquote
{margin: 0.5em 1em 0.5em 20pt;
padding: 1.2em;}
blockquote p
{margin: 0;
padding: 0;
width: 100%;}
.voet { vertical-align: 60%;
font-size: x-small;}
em, pre em, dt
{font-weight: bold;
font-style: normal;}
code, pre
{font-family:
"Courier New",Courier,monospace;
font-style: normal; }
h1, h2, h3, h4, h5
{padding: 5pt;
margin: 5pt 0;
font-family:
Georgia, "Times new roman", serif;
font-style: italic;
font-weight: normal;}

De links wil ik allemaal zwart. Omdat dit niet de default-waarde is (links worden normaal gesproken blauw), wordt dat specifiek aangegeven. Ik wil geen kleureninkt verspillen. Verder zet ik text-decoration op none, omdat je toch niets aan de links hebt. De tekst leest dus gewoon als tekst.

a {color: #000; 
background-color: #fff;
text-decoration: none;}

De volgende twee stijlen zijn essentieel. De eerste zorgt ervoor dat de breedte van het artikel helemaal de standaard breedte van het printbare gedeelte van de printer volgt. Vervolgens zorg ik ervoor dat het menu niet uitgeprint wordt, door display: none . Je kunt dus artikelen van deze site uitprinten zonder gedoe met selecteren en zelf lettertypes instellen en dergelijke. Mocht het niet werken - laat het me weten.

#main {width: 100%;}
#menu {display: none;}

dt {margin: 10pt 0 3pt 0;}