The second mechanism for associating style sheets with media types is to
use the elements media attribute, which specifies the intended
destination media for the external style information. This allows user
agents to load and apply external style sheets based on the characteristics
of the media where the document is being rendered.
[Note: The 2nd and 3rd lines above are one line, as is the 4th and 5th.
They were split for formatting purposes]
you are indicating that the myprint.css style sheet should be used when
printing the document, and that the myscrn.css style sheet should be used
when displaying the document.
At the time that this book was written, only Microsoft Internet Explorer
properly supported the <link> element with media types. With Netscape
Navigator, if you specify anything other than the screen media type,
Navigator will ignore the entire element, and therefore ignore the entire
external style sheet!
Try It Out — Using the <link> Element to Handle Different Media
Types
In this exercise, we will use two external style sheets to control the
display and printing.
Type the following into your text editor:
body { font-size: 18pt }
span.speaker { background-color: yellow }
.stage { font-style: italic }
p.stage { text-align: center }
Save the file as linkscrn.css
Create a new document in your text editor and type the following:
body { font-size: 10pt }
span.speaker { font-weight: bold }
.stage { font-style: italic }
p.stage { text-align: center }
Save this file as linkprnt.css
Edit the file style1.htm and make the following changes to the <head> section:
[Note: The 3rd and 4th lines above are one line, as is the 5th and 6th.
They were split for formatting purposes]
Save the file as link.htm and run it in Microsoft Internet Explorer. You
should see something like:
From within your browser, select the File | Print menu item. You should see
something like:
How It Works
We simply took our two style sheets out of the document and put them into
separate documents of their own. Note that the content of the style sheets
wasn't changed in any way, so that what is seen on the browser and the
printed page are identical to those of the last example. In the
<head> of the document, we simply associate these external style
sheets with the document content like so:
[Note: The 3rd and 4th lines above are one line, as is the 5th and 6th.
They were split for formatting purposes]
We can see that there are two <link> elements. The first identifies
the style sheet to use for the print media type and the second identifies
the style sheet to use for the screen media type. The files were the style
information is contained is given as the value of the href attribute.
When we looked at our document in the web browser, the style sheet
corresponding to the screen media type was opened and used. When we sent
our document to the printer, the style sheet corresponding to the print
media type was opened and used instead.
