Print Stylesheets: Styling for Paper

by Nathan Rohler

I know you've already heard by now – CSS is very powerful and flexible.  In all the din surrounding CSS3 and other flashy features, it's easy to forget about some of the more foundational functionality that shouldn't be ignored either. Today, I'm going to touch on one of the lesser-used features of CSS: the ability to customize how your webpage looks when it is printed. That's right... on paper – that physical medium that the Internet was supposed to kill.

Do You Need It?

Do you need custom styles for printing? This question primarily depends on your audience and your page as it currently stands. If you have a page in mind where you might apply this technique, I recommend you load that page right now and open the print preview. Think about what elements (such as navigation) could be removed or simplified to save paper and make the output neater.

The other factor is audience and the type of content you're providing. I'll admit that we've been a tad lazy here on our own site and haven't implemented any special print styles for most pages (some documentation excepted). Why? Simple – our content is intended to be consumed online, not on paper. (If we receive feedback to the contrary in response to this article, we'll certainly update!) When you're dealing with code samples and interactive content, a browser beats paper almost every time.

But let's think about your site. Let's consider just a few types of sites where printing is much more relevant:

• Real estate listings
• Recipes
• Contact information pages for all types of businesses
• How-to guides for offline activities (e.g. instructions for caring for a garden plant)

In all of these cases and many others, there's a decent chance that the content will be consumed offline on paper. Adding custom styles for printing will help set your site apart, save paper, and bring visitors back because of the great online and offline experience.

How It Works

You can create an entirely separate CSS stylesheet for print, starting from scratch, or you can build on the existing screen-targeted styles. In most cases, tweaking the default styles is the best option – no need to reinvent the wheel when you've already spent time styling your site as desired. This is the method on which we'll focus today.

To add print-only styles, simply add the following code at the end of your stylesheet:

@media print {
   /* All print-only rules go here */
}

Add rules to your stylesheet just as you normally would, but wrap them in @media print { ... } to specify that those rules are only to be applied when printing. Amazingly simple, right?

Suppose you have a navigation div on your page with an id of nav. Since navigation isn't relevant when printing, let's add some code to hide it. Here's the CSS that should be added at the end of your stylesheet:

@media print {
   #nav {
      display: none;
   }
}

If you preview your page again and open the print preview, you should see that the navigation area is now hidden.

A Time-Saving Tip for Creating Print Styles

To save time while you're creating the print-only styles, you may want to choose to add the @media print { ... } declaration as the last step, instead previewing the CSS along the way directly on the screen. This avoids having to launch the print preview to try out every change. Once you've perfected the CSS, you can add the declaration and confirm that everything appears as expected in the print preview.

Helpful Print-Related CSS

Hiding Content

The most common CSS action to perform when printing is to hide irrelevant page elements. As shown in the example above, the display property is used to hide content:

#myElement {
   display: none;
}

When certain elements are hidden, note that you may need to adjust margins on other page sections to avoid empty space.

Tweaking the Layout

When you're printing, the primary content should take absolute center-stage. Because of the limited available width and need for readable text sizing, the paper environment is rather similar to the tablet viewing environment. This means that content should almost always be arranged into separate, vertically-stacked sections rather than horizontally-adjacent columns. In addition to hiding various elements, creating this type of layout often requires removing element floats:

#myFloatedElement {
   float: none;
}

Showing Print-Only Content

Suppose you've hidden your complex header that includes navigation. The only problem is that your logo was in that area; now, a printed page doesn't clearly identify that it came from your site. The solution is to create special content that's hidden when being viewed on a screen but revealed when printed. To implement this effect, add the print-only content to your page's HTML with class="printOnly" :

<div class="printOnly">
   <h1>My Simple Site Title</h1>
</div>

Then, in the standard screen-targeted CSS, add code to hide this content:

.printOnly {
   display: none;
}

To reveal the content when we print, add this code within the @media print { ... } section:

@media print {
   .printOnly {
      display: block;
   }
}

The display: block; declaration unhides the content, causing it to be shown only when printing. In this example, I only added some simple logo text; but you could add something more complex, such as a message saying, "Thanks for printing content from mysite.com. Be sure to visit us again soon online!" or similar.

Conclusion

In this article, you've learned how to customize the appearance of your webpages when they are printed, via print-only CSS. This simple technique doesn't take much time to implement and helps provide a great all-around experience for your visitors, whether they're viewing your content on a screen or on paper.