Why you should have a print style sheet

The reason you would want to do this is so that you can have the HTML page 'change' it's appearance automatically when someone visits your page with a particular type of device. These types of devices can include a typical desktop computer, a PDA (Windows CE device, Palm Pilot etc) and a printer among other devices!

I'm going to only be using 'print' and 'screen'.

Here's a sample pair of CSS links that point to different style sheets (from this site!), one for the printer to use and the other for a normal PC monitor to use: 

<link rel="stylesheet" type="text/css" media="screen" 

href="growth.css" />

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

The code in the link that chooses which style sheet to use is this text: 

media="print"
media="screen"

The first ('media="print"') points to the style sheet that has been set up for printing while the other (media="screen") is set up for normal PC monitors. Nowadays most browsers know that if someone tries to print the page the style marked with: 'media="print"' should be used.

For the Style sheets i removed the back ground image change all text to black and increased font size. i then hid all images and the navigation as this is not needed for print documents. To do this use this bit of CSS code.

display: none;

If you wish you can add a print button but it is not a requirement for the print style sheet to work. The print button uses JavaScript to print the page:

<a href="#" onClick=" window.print(); return false">Print</a>

Published 10.09.06