making a stylesheet for printing


Linking a print stylesheet

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" media="print"
    href="printstyles.css" />
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; 

In both cases, you can still link your normal style sheet that the web browser will use for rendering your page.

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

It doesn't matter if the declarations in your main stylesheet and the "print" stylesheet overlap — only one of them will be used at a time anyway.

Now that you know how to add a print style sheet to your page, what do you put inside of it?

What to put in print stylesheet

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 also 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: {
  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; 

Know more

Original file on printing stylesheet