CSS For Printing

Printing web pages has always been a bit of a crap-shoot. What looks good on the screen or in a web browser doesn't always look so great on a printed page. Web pages, for instance, often use sans-serif fonts for improved screen legibility, while printed materials typically read better with serif fonts. Most web pages may also include widgets -- such as advertisements and navigation -- that are useless on a printed page. And since most browsers need to "shrink" a web page to fit on a standard 8-1/2 by 11 page (often cramping text and images), it's no wonder that what you see on the web is rarely what you print.

Some sites -- particularly news sites -- have compensated for this by creating special "printer-friendly" versions of their pages. But these can be a great deal of work to create and, in the end, require maintaining multiple versions of pages. Isn't there a better way?

You bet! With CSS, you can create a specific style sheet for printing and link it to your pages. Browsers will still display your pages using your normal style sheet but, when a user prints your page, the print style sheet kicks in. Let's see how it works.

Linking a Print Style Sheet

Linking a print style sheet to your pages is the same as linking a normal style sheet, but with one difference: you'll need to add a media attribute to your <link> tag. Like this:

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

If you're using an internal style sheet, you can add that same media attribute to your <style> tag:

<style type="text/css" media="print">
body { font: 12pt Times, serif; }
</style>

In both cases, you can still link your normal style sheet that the web browser will use for rendering your page. You can give that style sheet <link> a media attribute of "screen":

<link rel="stylesheet" type="text/css" href="normalstyles.css" media="screen">

It doesn't matter if the declarations in your "screen" and "print" style sheets overlap -- only one of them will be used at a time anyway.

Now that you know how to add a print style sheet to your page, what do you put inside of it?

Changing Fonts

The first thing you'll probably want to do in a print style sheet is set the fonts. Most web sites use sans-serif fonts (such as Arial or Verdana) since many studies have shown that those fonts are most readable on computer screens. But since a number of those studies show that serif fonts (like Times New Roman or Garamond) are most readable in print, you'll probably want to use serif fonts in your print style sheet.

For instance, if your document consists of <h1> and <p> tags (styled with sans-serif fonts for the screen), you might add this declaration to your print style sheet:

h1, p { font-family: Garamond, "Times New Roman", Times, serif; }

In addition to changing the font, you may also want to change the font size and units of your document. Pixels and ems are common measurements when sizing text on the web, but points are the perfect measure for printed pages (that's what they were designed for!). So, you could amend the declaration above to include appropriate font sizing for your printed document:

h1 { font: 24pt Garamond, "Times New Roman", Times, serif; }
p { font: 12pt Garamond, "Times New Roman", Times, serif; }

You could also add values for line-height, font weight, word spacing, justification (with the text-align property)... all of the same CSS properties available for displaying text on the screen can be adapted to style your text for printing.

Eliminating Elements

Most browsers give you the option of printing backgrounds and images when you print a document. But what if you want certain images to be printed, but not others? For example, you might want users to see your logo when they print a page, but not the site navigation. How can this be done? Enter your new best friend: display: none.

When you set an element's display property to "none", the result is pretty straightforward -- the element doesn't appear. This can be a powerful tool in your print style sheet. For instance, if you gave each of your advertising images a class of "ad", you insert the following declaration in your print style sheet to hide them:

img.ad { display: none; }

You can use display: none to hide a <div> containing navigation, all <img> tags, or any number of elements. This is a great way to give the user a page that, when printed, contains only the elements they truly need and want (usually, just the text).

Margins, Colors, and More

Why stop there? You could also set margins on document elements -- for example, if you wanted to give the main text more room, you could use the following declaration (this example assumes the text is contained in a <div> with the id of "content"):

div#content { margin-left: 1in; margin-right: 1.5in; }

(Note that we used inches as the unit of measurement -- this makes much more sense for a print document than an on-screen document, where pixels are a more natural rule-of-thumb.)

What if your web page uses a bright yellow font on a dark background? If the user is printing to a color printer and doesn't print the background, your text may be illegible. In that case (and in many others -- you may want to change border colors, too), it might be best to set your text to black (or something grayscale) for your print style sheet. A simple declaration does the trick:

p { font: 12pt Times, serif; color: black; }

You're probably getting the idea by now -- you can use a print style sheet to radically transform your page into something that will look just as good in print as it does on the screen. Your users will appreciate the fact that they can print your pages and still be able to access the information in a pleasing, legible way -- and you'll get the benefit of not having to create a ton of separate "printer-friendly" pages. All you need is one style sheet. So, what are you waiting for? Start styling!