Tips for creating CSS styles for print

Most Web pages are viewed on a computer screen, but some online content finds its way into print media. Since the formatting that makes Web pages look good on screen doesn't always have the same effect in print, Web builders often create separate printer-friendly versions of pages that visitors are likely to print. Now, if you use structural XHTML markup and CSS, there's no need to create a separate printer-friendly page--all you need is a few CSS styles to reformat the page content for printed output.

Start with good markup
The power of XHTML and CSS is that content and presentation are separate; you can change the formatting for another media without changing the content or its basic markup. But for the concept to work in practice, you need good, clean structural markup. So, before you attempt to create a printer-friendly page with CSS, you need to take a close look at the XHTML markup.

Clean out any inline styles or other presentation formatting embedded in the markup. In order for the print media CSS file to do its job, all the styles and formatting must be controlled by the attached style sheets and not by local formatting in the markup. Also, remove any CSS styles from the document header and save them in an external style sheet attached (linked or imported) to the XHTML document.

As you check the markup, make sure the content is grouped logically into divs, and that each of those divs is identifiable by ID or class.

Step 1: Add a print style sheet
The first step in creating a printer-friendly page with CSS is to attach the print media CSS file to your XHTML document. I prefer to use links in the XHTML header to two separate CSS files: one for all media (or screen media) and the other for print media. The links look something like this:

<link rel="stylesheet" type="text/css" media="all" href="mysite-all.css" />
<link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />

Step 2: Set the base colors and fonts
Colored text and richly colored and textured backgrounds may look good on screen, but not on a printed page from a black-and-white printer. Simple black text on a white background generally looks best in print.

Designers usually establish the default background and text colors in the rules for the body tag selector. The same selector also sets the default font face and size, like this:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  background-color: maroon;
  color: silver;
}

To make this style printer-friendly, change the colors to black on white, and set the base font size. The body styling looks like this:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  background-color: white;
  color: black;
}

Note that the font size is in points (pt) in the print style sheet. Pixels are more appropriate than points and inches for specifying on-screen measurements, but the reverse is true in print.

Many people recommend replacing the sans serif fonts that are commonly used for on-screen rendering with a serif font. I, on the other hand, believe this is a case-by-case design decision, so I don't automatically switch the fonts in every print style sheet.

Step 3: Style the links
There are two schools of thought on how to handle links in printed output. One approach is that links don't work on paper, so they should be styled like the rest of the surrounding text. The other approach is that links are such a vital part of the fabric of the Web that they should be clearly visible in the printed text.

Regardless of whether your design goal is to make links stand out or blend in, you'll undoubtedly need to change the styling of links between the normal Web page and the print version. Since there's no point differentiating between normal and visited links, you can combine those two selectors, like this:

a:link,a:visited {
  color: #3333CC;
  text-decoration: underline;
  font-weight: bold;
}

This example makes the links dark blue (dark gray on black-and-white printers), bold, and underlined, which is a common styling for links in plain black text on a white background.