HTML and CSS Reference
In-Depth Information
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
element:
<link href=”print.css” rel=”stylesheet” media=”print” />
Figure 8-37 highlights the newly added code.
figure 8-37
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
.
