From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

You've decided to make your site "printer-friendly". You read the article on what it means to be printer friendly, but now you have to decide how you want to do it. There are several options:

1. Make a copy of every page or article - and manually remove all the non-printer-friendly stuff.
2. Use a (CGI, PHP, JavaScript, other) script to remove the non-printer friendly stuff on the fly.
3. Write a style sheet for print.

The drawback to option one should be fairly obvious to most people. It is very labor intensive and requires that for every page on your site, you create a second, duplicate page.

Option two is the most common choice right now, because it mitigates the problems of option one, and with a small change in how you write your Web pages, you can set it up for every page on your site. But if you don't have access to CGI or you just don't feel comfortable with programming, this method can be challenging, if not impossible.

Cascading Style Sheets to the Rescue

Luckily, CSS was not written with just Web pages in mind, and with just a few extra codes you can create a printer style sheet that removes all the non-friendly options on your page and even takes into account issues such as typography and readability. And you don't have to write two different copies of your page or do any programming to build it.

Defining a Style Sheet for Print

As with screen style sheets, you use the <link> element to define the print style sheet your Web page should use:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

The only difference between this link element and the link to your screen style sheet is the attribute:
media="print"
Most style sheets are written for the screen, so the media can be left off, or written as:
media="screen"

Building the Style Sheet

When you build a print-friendly style sheet, you need to keep in mind all the rules that were defined in the previous article:

• Change colors to black on white.
• Change the font to serif.
• Watch the font size.
• Underline all links.
• Remove non-essential images.
• Remove navigation.
• Remove some or most of the advertising.
• Remove all JavaScript, Flash, and animated images.

Change these rules into CSS:
Black on white with 12-point, serif fonts:
body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }

Underline links:
a { text-decoration : underline; color : #0000ff; }
I also like to make the links blue, to stand out on color printers.

Remove Non-Essential Images, Ads, Navigation, and Scripting
The best way to do this is to put <div> elements around each section of your page. For example, you might have the following sections:

• top, bottom, left, and right navigation
• internal advertising
• content
• other elements

Define each of them with a <div> element:

• <div id="navigation" name="navigation">
• <div id="advertising" name="advertising">
• <div id="content" name="content">
• <div id="other" name="other">

Then, in your style sheet, get rid of the ads, navigation, and other information:
#navigation, #advertising, #other { display : none; }

The print.css Style Sheet

The print.css style sheet would look like this:
body {
  color : #000000;
  background : #ffffff;
  font-family : "Times New Roman", Times, serif;
  font-size : 12pt;
}
a {
  text-decoration : underline;
  color : #0000ff;
}
#navigation, #advertising, #other {
  display : none;
}

Save print.css in the same directory as the file, include the <link rel="stylesheet" type="text/css" href="print.css" media="print" /> in the head of your document, and your page will print perfectly while displaying however you would like.