Open up the template page. Now, if you are in something other than Netscape 4, do a print preview, and you should notice that the resulting page is quite a bit different from the one we saw before. This is the "printer-friendly" version of our template, and is nothing more than another CSS file, with a media type of 'print'. Traditionally this was done with either loading an entirely different page already printer-friendly, or use javascript to draw a new window with cleaned text.
Now, open the printer friendly CSS file. Looking over the CSS file, you will notice that I chose to turn off the menu, the footer, borders, and have no background color because they are not needed when we wish to read just the content of a webpage. This is an important concept to keep in mind: content on the web has a different purpose and is read differently than printed content.
You should also notice that the printer CSS file is very small. Because I set the media type of the main CSS file to be 'screen', and the printer friendly CSS 'print', the main CSS file is not used. Using the media type allows me to then use only the printer friendly CSS file when printing, which means that I only have to declare a few attributes, and don't have to override attributes set in the main CSS file.
Having said that, take note of the '@page' element at the top of our print.css. Because this CSS is for print media, we should treat it as print media, rather than a webpage on a printed medium. This is represented by the @page element. We set properties of the printed page, such as the margin and page size, and then set our overall and content divs to 100% to fill up the space. Sure, we could set our div width to something around 600px, but then we'd be treating it as a web page.