Setup Printer-Friendly Stylesheets with CSS Magic

This blog entry is about creating printer-friendly stylesheets for your web pages. I know it’s happened to you before. You clicked the print button in your browser and out came pages of needless page headers, navigation menus, banner ads, footers, etc., but all you really wanted to print was a small block of text that could have been contained to less than one printed page.

Setting Up Your Print Stylesheet

Getting started is easy! While you could setup an additional page that is devoid of header / footer elements, navigation menus, and banner ads, I recommend creating a single web page that uses media-specific stylesheets. This way you will only have to maintain one web page as opposed to two.

There are actually quite a few different media types that you could use for your web pages and you can read about them at the w3schools website. At the very least, you should create stylesheets for the screen and print media types for pages like order confirmations and receipts. I like to use separate print and screen stylesheets so that screen styles do not interfere with any print styles. Otherwise you will have to spend time “cancelling” out styles like background colors and images for your print styles.

To setup your print stylesheet, add the following in between the <head> tags:

<link href="print.css" media="print" />
<link href="screen.css" media="screen" />

Styles specified with the media type of “screen” will only render when the web page is viewed on the screen while any styles specified with a media type of “print” will only display when you print out your page. To verify that all is setup correctly, use your browser’s print preview feature to preview the print styles.

Hide Unnecessary Elements

Sometimes there are elements that you do not want printed, things that wouldn’t add value to the user when printed out. For example, decorative images, navigation menus, banner ads, etc. are items that can really take up a lot of unnecessary real estate when printed out.

In your print stylesheet, you would include display:none; property for these elements so that they don’t waste space and ink. Your users will appreciate it!

Create Printer Friendly Tables

If you are printing a table of records that spans more than one page, it is useful to display the table headers on every page. For the <thead> element, you can use the following CSS styles to repeat table headers. While Firefox will print table headers on every page, you must explicitly state for IE6/IE7.

thead { display: table-header-group;}

Other Tips

Just a few other tips to consider when building your stylesheets.

  • Use a serif font like Georgia or Times new Roman for increased readability.
  • Be mindful of printer ink. Use colors sparingly.
  • Avoid using a lot of background images & colors in your print stylesheet, if at all. By default, some browsers will not print out background colors or images.

That’s all there is to it! See how easy it is to control the appearance of a web printout using just a little CSS magic?