Custom CSS for Printer Output

You might not think of it while you are plowing through your css, painstakingly making sure everything is pixel perfect, but when you go to print, through your tears, it will certainly cross your mind. Things look differently when displayed on paper, then they do on screen. So, how can I keep my site from looking like a cascading nightmare when printed? Thankfully the solution is simple. Use CSS!

Firstly create a new stylesheet, let's call it "print.css". You will need make sure that this stylesheet is being linked to, if the page is being viewed as print. This requires a call similar to <link rel="stylesheet" type="text/css" href="path/to/print.css" media="print" /> There are 10 media types defined in CSS2. The "all" media type is certainly the most common and is called by default when linking. In our case we are obviously using "print". From here things should be pretty familiar, It's just CSS. My print.css file tends to have a lot of display: none; calls getting rid of tabs, menus, navigation, etc.. as the idea is to override your existing styles to output something that is legible on paper. It's most certainly worth a look.

ALA