Printer Friendly Pages

Category: CSS
Reviewed by: swnesbitt   
Reviewed on: May 26 2006
» Discuss this topic ( Posts)

Technologies like the Web are supposed to make us paperless. But that's not the case at all. If anything, people print Web pages almost as often as they read them on screen. Why? Most people are tactile. The heft of paper is comforting to them. In fact, several people have told me that a document isn't "real" if they can't hold it in their hands.

In many instances, printed Web pages look like ... well, printed Web pages. There's a lot of superfluous content in the printout. Depending on the page, that could include navigation bars, ads, icons, etc. On top of that, the text on many a Web page scrolls beyond the right margin, and words are cut off in the hard copy.

Countless Web sites allow you to access "printer friendly" versions of their pages. However, these are usually generated using some server-side arcana. Instead of using scripting, why not use CSS to create printer-friendly Web pages?

Among other things, the Cascading Style Sheets, Level 2 specification defines how to target some or all of a a Web page to a particular output device -- media in CSS-speak. One of those media is a printer. Using CSS, you can reformat your Web pages for printing. And if you've coded those pages properly the process of styling for print is quite easy.

Let's Get Styling!

Before you start coding your print styles, you should decide how you're going to put those styles into a CSS file. There are two ways you can put CSS printing styles into a file:

  • Combine screen and print styles in one file
  • Have separate CSS files for screen and print styles

How you combine or separate styles will affect how you link your stylesheet to your Web pages (this is discussed later in the article). If you plan to combine your screen and print styles in a global CSS file, you must create a section for each set of styles. Set up the screen styles section like this:

[code] @media screen {


Set up the print styles section like this:

[code] @media print {

} [/code]

The @media elements are the way that CSS tells a browser when and where to apply formatting. You simply put your style definitions for each media between the curly braces.