HTML and CSS Reference
Kevin wants you to use the print style sheet for print devices. He wants the other style
sheets to be applied to screen devices with the exception of the base style sheet, which
should be applied to all devices. You'll use the media attribute now to associate each
style sheet with the appropriate device.
To apply the media attribute:
1. Return to the treebook.htm file in your text editor.
2. Add the attribute media=”screen” to the link elements for the layout.css and
effects.css style sheets.
3. Directly below the link element for the effects.css style sheet, add the following
<link href=”print.css” rel=”stylesheet” media=”print” />
Figure 8-37 highlights the newly added code.
specifying the media device for each style sheet
load the style sheets only for screen de v ices
base style sheet is
used by all devices
lo ad the style sheet
only for print devices
4. Save your changes to the file, and then reload the treebook.htm file in your Web
browser. Confirm that the appearance of the page has not changed. It should not
change because your Web browser is treated as screen media, and you haven't
changed the style sheet for that media type.
Now that you've identified a style sheet to be used with printed or paged output, you
are ready to create your print styles. The first style rule you'll make is to hide the page
header, navigation lists, and page footer by setting their display properties to none .