Build a Print Stylesheet

Don’t you hate it when you print a web page, only to have a bunch of extra junk that generates several pages worth of ads, RSS icons, and navigational links? What a waste of ink (it costs you $8000/gallon, you know).

Computers aren’t really suited for reading long documents, so it’s common to print overly long web pages for later reading. I do it now and then, though I mostly try to read things online (I’m not going to sit through a 40-page eBook though). Plus, if you’ve penned the ultimate guide to removing grape jelly stains (or whatever, it’s hard to think-up good examples), people will want to print it out to refer to in the future.

What you need is a print stylesheet. No website should be without one.

First, create a new stylesheet. Call it print.css. Next, look through your site’s source code. What do you not want to appear when your pages are printed? How about that sidebar column? It has an id of #sidebar, so you add this new rule in your print.css file:

#sidebar { display:none; }

Isn’t that easy? Any element can be eliminated from print-outs by using display:none. Suppose you want to remove all of the ads. You were smart enough to wrap them all in DIVs with class of “.advertisement“. So you just add a style in your print stylesheet like this:

.advertisement { display:none; }

And so on. Add new rules for anything you want to ban from print-outs. If you want to be nice, and save ink, make sure to set the colors of all textual elements to black (or a shade of gray). Links are a good example. Should they really appear in blue on paper? Just make them underlined.

Once you’ve finished, upload print.css to your web server.

Finally, add this line underneath the declaration for your normal stylesheet:

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

Just use your browser’s Print Preview function to test it, and you’re done.