I am sure you have come across this a few times yourself. You have built a beautiful site, so beautiful that the client wants to be able to print out pages for one reason or another. Alas this is never so straight forward and required the generation of a separate template specially formatted for print. No more, thanks to Style sheets and they can really make your life easier, especially in the aforementioned scenario.

The best place to test this idea was for my site, I thought it would be nifty to be able to print out the articles themselves minus, the header, navigation and footer without the use of a second page. Since this was another in hindsight kind of step, I added a set of div tags to my page to logically group/structure the page. Roughly speaking this is what the page is structured:

<div id=”header”>
…header and top level nav code goes here…
</div>
<div id=”content”>
…main article body appears here…
</div>
<div id=”side_nav”>
…nav code goes here…
</div>
<div id=”footer”>
…footer is included here…
</div>

So far so good. Next I created a new style sheet specifically constructed for printing. The first thing was to hide the page elements that I didn’t want to be printed out. This is achieved by specifying: display: none; and in my case assigning it to relevant <div> ids. Next I wanted to show the category nav, but in a print manner so I opted for display links as underlined. Finally I formatted the main content area to appear on a white background and use arial as the preferred font and black as the colour for that font. Listed below is my external print style sheet: print.css

/* print styles */
A:link, A:visited { background: white; color: black; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; }
#header { display: none; }
#content { background: white; color: black; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: normal; }
#side_nav { display: none; }
#footer { display: none; }

Next thing I needed to do was link the document to that new style sheet, and restrict it’s use to printing. The <link> tag has attribute called media, which can several values the default being screen (i.e. when you look at the page via your web browser). The first thing I did was modify my existing <link> tag to include the media type set to screen. Next I added another <link> tag with a media type set to print and pointing to my print.css style sheet.

<link rel=”stylesheet” href=”../css/default.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”../css/print.css” type=”text/css” media=”print” />

And that’s pretty much it. The best way to test this is use the print preview option in IE. Now it this all worked the only thing displayed in the print preview area of the display is the content of this article, minus the header, the nav and the footer. A quick aside: if you are using IE6 and nothing appears in your print preview area, you might think your print style sheet is not working. There appears to be a slight bug, because if I zoom in and zoom out again the print preview displays properly (I could have wasted a lot of time on this…). Mind you this is just the beginning, there would seem to be a lot more options available, such as setting margins and much, much more. As and when I figure this out I’ll be sure to make a few more notes. In the meantime… enjoy…