There has always been a gaping divide between the web and print on paper. Browsers have never been able to quite get pages to print out correctly. Wide pages run off the side of the page, header elements appear comically large, words wrap incorrectly. Print stylesheets are an elegant, simple solution. They require no extra "Print this page" link, don’t affect page download times, require no scripting, will work on password-protected files, and eliminate the need for duplicate print-only pages.
This here page is a very simple example of print stylesheets in action. This page is created using a simple, two-column tabular layout†, with a few key page elements: a title, this column (content), the column to the right (navigation), and a footer, all of which are important elements for the screen. But when you print this page out, you certainly don’t need the navigation (you’re not going to click on a piece of paper, duh), and here you don’t need the footer.
To get all the pages on your site to have nice printed versions, you need to create one extra css file (I cleverly called mine print.css) and add one line of code to your html document’s header:
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
When a user selects the "Print" function from their web browser, your print.css file is substituted for the default stylesheet. The print.css file will be similar to your global stylesheet, but should contain the changes you wish to see on a printout. In this example, we want to remove the navigation and footer, so we add this line of code:
#navigation, #footer, .noprint { display: none; }
This line tells any html element with id="navigation" or id="footer" or class="noprint" to not show up for the printout (FYI, you get one id per document, but as many class elements as you want [reference]). This means that you could apply the class="noprint" to any part of the page you don’t want to see in print. For example, the following paragraph will not show up on the printout.
Booger.
In the html for this page, the elements to be removed (corresponding with the above css) look like this:
<td id="navigation"> and <p class="noprint">
Okay. For the sake of better typography, we’re also going to change the font of the main content for printout. Onscreen, I chose a sans-serif font (Verdana, Arial, Helvetica, sans-serif), but a font with serifs (Times New Roman, Garamond, serif) will look much better on paper. I also bumped the font size up to 12pt, set the text to be black on white, bumped the width of the content pane out to 100%, and removed the border, all with this simple CSS:
body, p, td, th, ul, a {
background-color: #fff;
color: #000;
font-family: "Times New Roman", Garamond, serif;
font-size: 12pt;
}
#content {
background-color: #fff;
width: 100%;
border: none;
}
That’s all there is to it! If your browser has a "Print Preview" function, check out its results. You can also look at a version of this same page which has the screen style set to print.css.