Stylesheets are used to control the appearance of HTML pages, can also be used to allow you to change the appearance of a page when it is printed.

Why is this useful?  If, for example, you have a navigation panel on the left hand side of your page, you can hide this panel when you print, so the printout contains the useful information only and takes advantage of the full page width, which generally means it can be printed on fewer pages.

Normally stylesheets are used within a HTML page as follows:

  <link type='text/css' rel='Stylesheet' href='/2007/09/22/using_stylesheets_to_print_differently/sytles.css'>

To use different stylesheets for the screen and printer, you use the media attribute as follows:

  <link type='text/css' rel='Stylesheet' media='screen' href='/2007/09/22/using_stylesheets_to_print_differently/screen.css'>
  <link type='text/css' rel='Stylesheet' media='print' href='/2007/09/22/using_stylesheets_to_print_differently/printer.css'>

In this case, you would need to duplicate all the common styles in both files, so if there are a lot of common styles, you may want to have smaller stylesheets which just contain those styles which you want to be different on the screen to how they appear on the printer.  So, a better strategy would be:

  <link type='text/css' rel='Stylesheet' href='/2007/09/22/using_stylesheets_to_print_differently/common.css'>
  <link type='text/css' rel='Stylesheet' media='screen' href='/2007/09/22/using_stylesheets_to_print_differently/screen.css'>
  <link type='text/css' rel='Stylesheet' media='print' href='/2007/09/22/using_stylesheets_to_print_differently/printer.css'>

The  different media types include handheld, projection, braille, and more, so you if your web pages appear in different devices, you can customize the appearance to better suite the device.