Spent some time this evening working on a print stylesheet for the site. The sheet itself isn’t hard at all, just tedious.
A print stylesheet is to a printout of your site what your “normal” stylesheet (”style.css” for most) is to the “screen” (monitor display) version: it defines what the output looks like when anyone hits print or print preview while reading your site.
Most sites, and certainly most WordPress sites, have no defined print style, and so what you see on the screen is far from what you get on your printer. What you’ll get is the content of the site with no CSS styling or formatting at all. Ugly, and hard read. Just click “File / Print Preview” on a few sites and you’ll see what I mean. [As of this writing, I don’t have the print stylesheet finished for my “index” page, so you can hit Print Preview right here and see the ugliness.]
A print stylesheet lets you control exactly what prints and exactly how it looks. Very cool.
How to do it? Here’s the best reference for WordPress users: Styling for Print from the WordPress codex.
Basically you take your current style.css stylesheet, and save a copy as print.css. Edit the print.css file and add a line at the beginning that says “@media print {” then put the closing brace “}” at the very end of the stylesheet, so the whole thing is contained within that declaration. Then add a line in your header to link the site to the new “print” stylesheet in addition to the original one. Just under the usual stylesheet declaration, you add something like:
<link rel=”stylesheet” type=”text/css” media=”print” href=”<?php bloginfo(’stylesheet_directory’); ?>/print.css” />
Note the media=”print” part! That’s what tells the browser this stylesheet is only for printer output!
Now edit away on the print.css stylesheet, “hiding” all the ids and classes you don’t want on the printout (e.g. some people don’t want the header or sidebars to print) by using the declaration {display: none;}. You can also doodle with the width of some elements (content, post or whatever) to get the most use out of your paper.
Then, what took the most time for me: change all your {font-size} declarations to pixels instead of em or percent. These relative font sizing designations are more desirable for the “screen” display, as they allow user-resizing of text and are more “accessibility” friendly. But printers like pixels, and you’ll find that stuff doesn’t look the same printed as it did on your monitor. Depending on the font, it may be unreadable. So for the “print.css” stylesheet, I changed all the font-size properties to pixels, then kept going back and doodling with them until I got a reasonably readable printed output.
Finally, you’ll find that there are many classes and ids you can just delete from the print.css stylesheet - for instance, all those which fall within another class which you’ve already blanked with {display: none;}. You’ll probably end up with a print.css stylesheet that’s very short and to the point, as compared to your “screen” stylesheet.
Important: We all know to measure twice and cut once, right? The web corollary is save a backup of your original and only work on copies! Once you start messing with print.css, you’re destined to leave an extra curly brace here or forget a semicolon there. Keep an untouched copy of the last clean, working version as a backup so you can revert to it when things mess up. And I do mean when, not if.
Anyone who’s an HTML, CSS or PHP guru (or any other kind of guru) can tell that I’m certainly NOT one. Everything I know is from “on the job training,” so there are bound to be better/ faster/ cheaper/ sexier ways to do everything than the way I do it. I’d certainly defer to the experts on any of this.
But maybe this’ll getcha started. 
