CSS Cookbook

8.1. Creating a Printer-Friendly Page

Problem

You want to create a printer-friendly page without having to manually or dynamically generate another web page.

Solution

Create a separate style sheet that dictates how a page looks when printed. Then associate the style sheet and set the media property to print:

<link rel="stylesheet" type="text/css" href="adv.css" 
media="screen">
<link rel="stylesheet" type="text/css" href="print.css"
 media="print">

If you’re writing a web page in valid XHTML, you need to include a space and a forward slash before the closing bracket at the end of an empty element such as link:

<link rel="stylesheet" type="text/css" href="adv.css" 
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" 
media="print" />

Discussion

You can use style sheets to dictate the presentation of documents in a wide range of media. By default, the value for the media attribute is all. Without the attribute, the user agent will apply the CSS rules in the style sheet to all media.

Although the most common attribute you probably have encountered is screen, which is used mainly for displaying documents on color monitors, the CSS 2.1 specification actually defines a total of ten media types, as shown in Table 8-1.

Table 8-1. Media types for CSS

Media type	Description
all	Suitable for all devices
braille	Intended for Braille tactile feedback devices
embossed	Intended for paged Braille printers
handheld	Intended for handheld devices (typically small-screen, limited-bandwidth ...