With CSS, you can create a specific style sheet for printing and link it to your pages. Browsers will still display your pages using your normal style sheet but, when a user prints your page, the print style sheet kicks in.
Linking a Print Style Sheet
Linking a print style sheet to your pages is the same as linking a normal style sheet, but with one difference: you'll need to add a media attribute to your <link> tag. Like this:
<link rel="stylesheet" type="text/css" href="printstyles.css" media="print">
If you're using an internal style sheet, you can add that same media attribute to your <style> tag:
<style type="text/css" media="print">
body { font: 12pt Times, serif; }
</style>
In both cases, you can still link your normal style sheet that the web browser will use for rendering your page. You can give that style sheet <link> a media attribute of "screen":
<link rel="stylesheet" type="text/css" href="normalstyles.css" media="screen">
It doesn't matter if the declarations in your "screen" and "print" style sheets overlap -- only one of them will be used at a time anyway.
Changing Fonts
The first thing you'll probably want to do in a print style sheet is set the fonts. Most web sites use sans-serif fonts (such as Arial or Verdana) since many studies have shown that those fonts are most readable on computer screens. But since a number of those studies show that serif fonts (like Times New Roman or Garamond) are most readable in print, you'll probably want to use serif fonts in your print style sheet.
For instance, if your document consists of <h1> and <p> tags (styled with sans-serif fonts for the screen), you might add this declaration to your print style sheet:
h1, p { font-family: Garamond, "Times New Roman", Times, serif; }
In addition to changing the font, you may also want to change the font size and units of your document. Pixels and ems are common measurements when sizing text on the web, but points are the perfect measure for printed pages (that's what they were designed for!). So, you could amend the declaration above to include appropriate font sizing for your printed document:
h1 { font: 24pt Garamond, "Times New Roman", Times, serif; }
p { font: 12pt Garamond, "Times New Roman", Times, serif; }
You could also add values for line-height, font weight, word spacing, justification (with the text-align property)... all of the same CSS properties available for displaying text on the screen can be adapted to style your text for printing.
Eliminating Elements
Most browsers give you the option of printing backgrounds and images when you print a document. But what if you want certain images to be printed, but not others? For example, you might want users to see your logo when they print a page, but not the site navigation. How can this be done? Enter your new best friend: display: none.
When you set an element's display property to "none", the result is pretty straightforward -- the element doesn't appear. This can be a powerful tool in your print style sheet. For instance, if you gave each of your advertising images a class of "ad", you insert the following declaration in your print style sheet to hide them:
img.ad { display: none; }
You can use display: none to hide a <div> containing navigation, all <img> tags, or any number of elements. This is a great way to give the user a page that, when printed, contains only the elements they truly need and want (usually, just the text).
Margins, Colors, and More
Why stop there? You could also set margins on document elements -- for example, if you wanted to give the main text more room, you could use the following declaration (this example assumes the text is contained in a <div> with the id of "content"):
div#content { margin-left: 1in; margin-right: 1.5in; }
(Note that we used inches as the unit of measurement -- this makes much more sense for a print document than an on-screen document, where pixels are a more natural rule-of-thumb.)
What if your web page uses a bright yellow font on a dark background? If the user is printing to a color printer and doesn't print the background, your text may be illegible. In that case (and in many others -- you may want to change border colors, too), it might be best to set your text to black (or something grayscale) for your print style sheet. A simple declaration does the trick:
p { font: 12pt Times, serif; color: black; }
The printstyles.css Style Sheet
The printstyles.css style sheet would look like this:
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
a {
text-decoration : underline;
color : #0000ff;
}
#navigation, #advertising, #other {
display : none;
}
Save printstyles.css in the same directory as the file, include the <link rel="stylesheet" type="text/css" href=" printstyles.css" media="print" /> in the head of your document, and page will print perfectly while displaying however you would like.
page-break-before and page-break-after
The CSS attributes page-break-before and page-break-after, both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
Value Description
always Always insert a page break
auto Default value. Insert page break only if at end of page.
"" (empty string) Do not insert a page break.
Let's say your page consists of multiple headers (with content following each). Want to divide each header into a separate page for printing?
<style type="text/css">
h1{
page-break-before: always;
}
</style>
How about getting even more personal, and divvying things up at specific location(s)?
content here
"
<DIV style="page-break-after:always"></DIV>
"
"
content here
Note that page-break-after may not work with <BR> or <HR> tag in some browsers.