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.

  • Marco

    That’s something I always planned to do but I never got the time to write the CSS…or I forgot about it… thanks for the reminder :)

  • Matt

    I had the same problem. I kept forgetting to make a print stylesheet (even when I redesigned WSC, I still forgot to make a print style). I finally got around to it the day I wrote by Best of 2007 post.

  • Pingback: 10 Cool and Useful CSS Tutorials | Webmaster-Source

  • deviant_two

    yay … i just wonder what i’ll looks like after (.advertisement { display:none; })

    t u 4 share this code