CSS Tip:
Design Print-Friendly Pages

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Web designers who struggle with browser display issues often forget another common way people view Web pages; many print a page for later reference. Use Cascading Style Sheets to set print parameters for your pages and increase the usability and accessibility for all your visitors.

Restyle The Page For Print

Creating pages for print is a two-step process: first you need to create a print style sheet that modifies your page display to remove non-essential elements and then use the LINK element to make the print style sheet accessible.

Consider what parts of your page layout aren't needed when the page is printed. For instance:

There are exceptions for images. Some should stay with the page's print version or you risk confusing or irritating your visitors:

So what's left on the printed page?

CSS makes it easy to remove the elements you don't need.

Creating A Print Style sheet

Your print style sheet needs to be saved in a separate file from your regular style sheet. That's because you use two different LINK elements to link the two style sheets to the Web page.

Let's use this example page (click here to view example) with a calendar of events for the fictional business "Zorra's Garden Retreat" to decide how to create a sample print style sheet.

A calendar of events is a great place to start if you're considering making print versions of just a few pages. Any business, religious group, or community organization that holds special events or meetings will find that eventually someone wants a hard copy of that calendar.

Here's a small screenshot of Zorra's Garden Retreat's calendar.

With just a quick glance, we see several elements that can be removed or need to be changed for the print version:

1. Change the background and text color to black text on a white background.
2. Remove the side navigation system.
3. Modify the footer.
4. Add a page referrer so the visitor can find the page again online.

View the site's external style sheet here. Note that it uses style classes to control the navigation display, font color, background, etc. We'll modify these for the print stylesheet. Fortunately, that's pretty easy to do. Since we don't want the navigation to display at all, we change all the style properties associated with navigation to display:none. Then, we just need to modify a few more elements to get the print effect we want.

Here's a comparison between the two style sheets with a short notation of changes:

Save this revised style sheet as "PrintStyles.css" and we're ready to link it to the document.

Linking The Print Style Sheet

If you've used external style sheets or external JavaScript files before, you're familiar with the LINK element.

Link an external style sheet like this:

<link rel="stylesheet" type="text/css" href="styles.css">

When you add a print style sheet, you have to add the "media" attribute. This tells the browser that the styles contained in that .css file should only be used when the document is printed.

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

Decide How To Link!

The easiest way to create printable pages is just to add two LINK tags to each page; that's what we just did. One links the basic layout external style sheet and the other contains the printable style sheet. It's a seamless process: your visitor clicks uses the PRINT option in her browser and the printer coughs up the printable version.

To see how this works, view the original file in your browser again. Then select the Print Preview option in your browser. You should see the page using the print style sheet layout.

Here's how it looks in Firefox:

It's easy and everyone is happy, right? Maybe not.

Perhaps your visitor really wanted an exact copy of the page—for whatever reason. She may be confused and frustrated when she can't print one. It's always possible to take a screen shot and then print that, but many inexperienced users don't know how.

So consider adding a "Printable Version" link in a prominent place. That's a standard hyperlink that links to a page that uses only the "print.css" style sheet. Note: don't use the "media" attribute in the LINK tag because you want the visitor to see a preview of what he's about to print.

That would mean that the link on your standard layout page would look something like this:

Then, the calendarPrint.htm page would have only one LINK tag:

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

This gives your visitor more control, but it's also a lot more trouble if you're coding everything by hand. That's why you may want to consider adding printable version of just a few of your most important or content-rich pages:

Advantages Of Print-friendly Pages

If your site has a lot of content that visitors may want to print for later reference, printable pages may be worth the extra effort it takes to create them. There are plenty of good reasons for print-friendly pages:

One disadvantage to you as a webmaster though, is that they're a little more complex, so it's easier to make HTML errors that create browser display problems. Always check your HTML code with NetMechanic's HTML Toolbox after every change. You'll avoid simple errors that can hide content or break your page entirely.

It's also important to check the new pages in as many browsers and browser versions as possible—particularly when you're relying on CSS to style page content. Browsers just don't always display CSS rules like you expect, so use NetMechanic's Browser Photo tool to quickly check for unwelcome surprises.

Browser Photo displays your page in 24 different browsers, browser versions, and operating system combinations. You'll quickly find out if your "printable" page has display problems.