Print stylesheet in CSS

There are a lot of websites on the internet with articles or other stuff that you might want to print. But when you click the print button on your browser, the results are usually crappy. The printed page will show banners, menus, ads and parts of the text are cropped off.

There is however, a very easy way to make your website printable using css, which i will explain in this tutorial. The first part of the tutorial will give you the basic idea and some tips, the second part shows an example page which is both printer and screen compatible

The basic idea

The html style and link tags that are used for placing css in the html, both use the media attribute, which allows you to specify the devices on which the stylesheet should be used. The idea is that we make one style sheet for the website and another one for printing so we can specify the things that should be shown on each device.

The media attribute can be one or more of the following values:
• screen - for computer screens
• print - for printed pages
• aural
• projection
• braille
• tty
• tv
• all - for all devices

We will use screen and print from this list for our example. You could also use "all" and override some of the values with a "print" stylesheet to make your site appear on all devices, instead of just screens and printers.

Now lets try out a simple example, if you copy the code below and show it in your browser (or click this link example_1.html). Then you should see This page is viewed on a computer screen. If you now go to "print preview" you will see the following text: This page is viewed on a printed page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>css example</title>
    <style media="screen">
    .screen_output {
        display: inline;
    }
	
    .print_output {
        display: none;
    }
    </style>
    <style media="print">
    .screen_output {
        display: none;
    }
	
    .print_output {
        display: inline;
    }
    </style>
  </head>
  <body>
    This page is viewed on a
    <span class="screen_output">computer screen</span>
    <span class="print_output">printed page</span>
  </body>
</html>

Tips and tricks for printable html

There are a few things that should be kept in mind when creating a print stylesheet:

Don't use a pixel font size
If you give a pixel font size, the pixels are translated to printer units, which is not always what you want.

Don't use a fixed size page
If you give the page a fixed size (for example 1000 pixels), then there is a chance that part of the content falls outside the printing range. This causes text and images to be cropped off, so its better to use percentage units.

Keep the number of images down
People are usually more interested in the text when printing a page, so keep the number of images down. Its also a good idea to hide banners and ads.

Hide the site navigation
Hyperlinks and buttons are useless on a printed sheet of paper, so try to hide as much navigation as possible.

There are probably more tips, but this is all that i could think of.

A basic example

Now its time for a real example. I could explain every part in detail, but the html would take up a lot of space, so i will just give you the source code and the result. If you want to see the outcome then go to test.html a create a print preview.

First up is our main page, which links to the "style_screen" and "style_print" sheets:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>Css print example</title>
    <link rel="stylesheet" href="style_screen.css" type="text/css" media="screen"></link>
    <link rel="stylesheet" href="style_print.css" type="text/css" media="print"></link>
  </head>
  <body>
    <div class="head">
      <div class="head_title">Css print example</div>
    </div>
    <div class="menu">
      <a href="" class="menu_option">home</a>
      <a href="" class="menu_option">search</a>
      <a href="" class="menu_option">about</a>
    </div>
    <div class="print_title">
      Printed from: www.blizaga.com<br />
      Printed on: 04-07-2007 13:13<br />
      <br />
    </div>
    <div class="field">
      This is the main content.<br />
      This is another part of the main content<br />
    </div>
  </body>
</html>

The style_screen css:

body {
    padding: 0px;
    margin: 0px;
}

.head {
    display: block;
    background: #81bcf5;
    border-bottom: 2px solid black;
    margin-bottom: 10px;
}

.head_title {
    font-size: 24px;
    font-family: arial;
    color: white;
    line-height: 60px;
    padding-left: 20px;
}

.menu {
    display: block;
    float: left;
    width: 180px;
    border: 2px solid black;
    border-bottom: 1px solid black;
    border-left: none;
    margin-right: 10px;
    background: #f3dba5;
}

.menu_option {
    display: block;
    padding-left: 3px;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid black;
}

.menu_option:hover {
    background: white;
}

.print_title {
    display: none;
}

.field {
    display: block;
    width: 400px;
    padding-top: 4px;
    font-family: arial;
    font-size: 14px;
}

And the style_print.css:

.head {
    display: none;
}

.menu {
    display: none;
}

.print_title {
    display: block;
    font-size: 11pt;
    font-weight: bold;
    font-family: arial;
}

.field {
    display: block;
    font-family: arial;
    font-size: 11pt;
}

If we now view test.html (test.html), we will see the following things:

Normal:
Printed:
That's it, i hope you learned something from this tutorial and thanks for reading it!