Creating a Style Sheet for Print

You can designate a style sheet to be used only when printing, only on screen, or for both print and screen. This allows you to hide those elements that don't need to be printed, as well as set special formatting that works well on paper for the elements you do want to print.

Or, in an @import rule, add print after the style sheet's URL (Figure 14.2).

Tips

For more details on media-specific style sheets, see page 133 in Chapter 8, Working with Style Sheet Files.
You can make a style sheet that will be applied for more than one kind of output by adding additional values for the media attribute, separated by commas.
The default value for the media attribute is all. That means, that if you have one style sheet with no media attribute and one style sheet specifically for print, the styles in the media-less style sheet will also be applied to your printed output. To limit a style sheet to computer browser output, use media="screen".
There is also an @media rule, though it is less well supported than the options described above.

Creating a Style Sheet for Print

Figure 14.1. In this (X)HTML document I've linked to the `screen.css` style sheet for the styles that will be used when displaying the page onscreen and the `print.css` style sheet for the styles that should be used when printing.

Figure 14.2. In this example, which should have the same effect in current browsers, I've linked to the `screen.css` style sheet but imported the `print.css` style sheet.

Creating a Style Sheet for Print

Figure 14.1. In this (X)HTML document I've linked to the screen.css style sheet for the styles that will be used when displaying the page onscreen and the print.css style sheet for the styles that should be used when printing.

Figure 14.2. In this example, which should have the same effect in current browsers, I've linked to the screen.css style sheet but imported the print.css style sheet.

Figure 14.1. In this (X)HTML document I've linked to the `screen.css` style sheet for the styles that will be used when displaying the page onscreen and the `print.css` style sheet for the styles that should be used when printing.

Figure 14.2. In this example, which should have the same effect in current browsers, I've linked to the `screen.css` style sheet but imported the `print.css` style sheet.