Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Applying a Stylesheet for Printing to a Web Page

Problem

You want to create a printer-friendly page without having to create a separate HTML file.

Solution

First, create a separate stylesheet containing the CSS rules for printing. For this example, the stylesheet with print-only CSS rules is named print.css.

Then, associate the stylesheet 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" />

Discussion

To create a print stylesheet, comment out the screen stylesheet and then create a separate, secondary stylesheet. In this second stylesheet, build the rules to dictate how you want the page to look when printed. After you have completed the stylesheet, associate the stylesheet with a link element, as mentioned in the Solution.

Media types

Stylesheets can dictate the presentation of documents to a wide range of media. By default, the value for the media attribute is all. Without the attribute in the link element, the user agent will apply the CSS rules in the stylesheet 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 10 media types, as shown in Table 10-1.

Table 10-1. Media types for stylesheets

Media type

Description

all

Suitable for all devices

braille

Intended for Braille tactile feedback devices ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required