KILL IE6

13 Print CSS

Some elements of a site do not make sense on paper. Fields for search, navigational elements and banners are just some examples. Zudem werden längere Texte in der Regel lieber auf Papier gelesen. There are many reasons to print out a web site. Newspapers have offered special print versions of their articles for a long time. This often requires special treatment on the server side, typically as part of a CMS (Content Management System). The printer-friendly page also needs to be retrieved seperately from the server. This leads to more traffic and is only advisable for large sites. A print CSS and a recent browser offer simpler, faster possibilities to make sites look good in print. (And do not generate extra traffic, either)
Undertake the following steps to create a print css:

media="print" (media attribute)

The stylesheet for the screen needs to be set to "screen", the one for the print stylesheet to "print". See also embed CSS.

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

font and background-color

Serif fonts are usually more appropriate for print. Headlines can be set in other standard fonts. The font size for print should be set in points. The font color should be black, and the background color transparent.

body {
background-color: transparent;
font-size: 12pt;
font-family:'Times New Roman',Times,serif;
color:#000000; }

display (hide navigation)

In print, background pictures, banners and search buttons are unneeded. Legibility and usage of print materials are two reasons. Elements (div) can be hidden with display:none;.

#navi   { 
background-color:transparent;
padding-top: 10px;
display:none;}

padding and margin

If padding and margin are set to 0px, the text will utilize the full width of the paper. This would be useless on screen though.

#content   { 
background-color:transparent;
padding: 0px;
margin: 0px;
}

a:visited:after (Links)

For a link to make sense in print, it's href attribute has to be printed out. This can be accomplished by the pseudo class :after and the property :content to print out the complete URL of the link. This CSS properties is currently supported by Mozilla and Safari.

a:after, a:link:after  { 
color: #000000;
background-color:transparent; 
content: " * Link " attr(href) "* "; }

a:visited:after {
color:#000000; 
background-color:transparent;
content: " * Link " attr(href) "* "; }

page breaks

You can force a page break with page-break-after:always;. Avoid avoids it, obviously.

page-break-after:always;
page-break-before:always;
page-break-after:avoid;
page-break-before:avoid;

further Articles