O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required