Change the way your site looks when it prints using CSS

By Donovan Myers
Posted on Nov 27, 2007

Comments (0)

If you've ever tried to print something from Internet Explorer, you've probably realized what a headache it can be. Whatever you were trying to print mostly prints on 1 or 2 pages, but the right 20% of the page seems to be cut off. Sometimes your printer might spit out 1 or 2 pages with that other 20%. If you're trying to write a research paper, cut off words and sentences can be a real headache. Even if you (or your customers) are just trying to print a simple coupon, cut off information is a pain.

Another added benefit of using style sheets to change the way your site prints is that you can hide non-essential elements. Why would you (or your customers) need to print off your navigation? You can even reformat your page to look like it's printed on a company letterhead.

Let's get started.

Take a look at our Bank and Credit Union Secure Website Hosting page. If you go to the print preview you'll notice that the content takes up the full width of the page. We've removed the top header and navigation as well as the sidebar navigation and right sidebar. We chose to leave the partner logos and our copyright and contact information on the bottom of the page for customers or potential customers to reference.

This site was developed a few years ago, and if we were to have planned to have a printer style sheet I would have designed it so we could keep our logo and phone number at the top of the page. I would have also hidden the Site Map link in our footer when the page is printed -- no one needs that.

I chose this page because it is a real world example. I can't imagine that you will redesign/restructure your whole site just because I've taught you about printer style sheets, so I'm using this example to show you how to convert a page designed without printers in mind.

Let's really get started.

There are two popular ways to hide non-essential information in your print style sheet.

Method 1:

* {
display: none;
}

This method hides everything, then you would pick individual IDs or classes to show. The reason this method is so great is because you can start with a blank slate and slowly add in the items you want to print. The downside to this method is you need to pick the proper display property for each item.

Method 2:

#navigation, #subnavigation, #sidebar, .donotprint {
display: none;
}

This method hides all of the IDs and classes that you do not want to show. This method is great because you don't have to do the extra work of unhiding items. The downside to this is that you have find each and every instance you want to hide and test all of your pages and possibly plan ahead by applying a donotprint class to some items.

I chose method 2 when it came to creating a print style sheet for our website:

#navigation, #subnav, #leftbar, #breadcrumbs, #phone, #photo, #rightbar, #logo {
display: none;
}

Once you've created your print style sheet, you'll need to set it up on your pages. Place this line in the head of your pages:

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

Make sure that you change "print-stylesheet.css" to what you've named your own print stylesheet.

Taking it further

Another great tip I can give you when creating your print styles heet is to set all of your font-sizes in points. Printers use points, not pixels, to render fonts so you should set them in points to create the best looking printed text. Here is an example of a great print style sheet set in points:

body {
/* set a base font size */
font-size: 12pt;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 18pt;
}
h3 {
font-size: 14pt;
}
p, ul, ol, dl {
/* paragraphs, unordered, ordered, and definition lists */
font-size: 12pt;
}