Did you know you can use CSS to style your website when you print it? That’s an other wonder of the CSS, you don’t have to create a special version called “printer friendly” and do you website all over again for printer. Just create a new CSS file an call it from your page by:

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

What is important here is the media=”print”. It tells your browser to use this stylesheet for printing purpose. Now we need write our printer friendly style.

There is a many properties in css reserved for printing but most of the time some simple changes do the job. First think about what you don’t want to appear on paper and what is useless when printed. The first things that comes in mind is the menu. What’s the purpose of a list of links when you can’t click on them…

Next change your background color to white, for this site for example it will be a total waste of ink, and time, to print it as it is. Be sure to change the font color as well if needed.

After this basic change it’s all about testing. Print preview is your friend. You can change the margin of you document, change the hyperlinks style so they appear as normal text, change header, footer, etc…

In the range of CSS print properties there is some that may be usefull, using the @page rule:

page-break:

Allow you to insert a page break before (page-break-before:value) or a page break after (page-break-after:value) an element. Values are:

• auto: default value
• Always: force a page break
• avoid: avoid page break when possible
• left: force one our two page break so the next page is a left page
• right: same as above but the next page is a right page

size:

Allow you to change the orientation of the page for an element. Values are:

• portrait
• landscape
• auto
• width and height

Be carefull about those properties thougth, they are not supported in every browser…