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.

To create a style sheet for print:

Add media="print" to the opening link or style tags (Figure 14.1).

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.

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

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.


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

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: