Associating Style Sheets with Media Types
In a previous chapter, you learned how to embed and
link style sheets to documents. This same mechanism may be used to associate
style sheets with different devices and media types. In summary, there are four
different mechanisms for specifying dependencies between style sheets and media
types:
the style element for embedding CSS
the link element for external CSS
@media rules
@import rules
The following sections describe each of these mechanisms and
some strategies for selecting an appropriate mechanism (in other words, which
mechanism should we use?).
Using the <style> Element
The first mechanism for associating style sheets with media types is to
use the style element's media attribute.
The <style>
element's media attribute specifies
the intended destination media for the enclosed style information. This means
that the style will only be applied if the device matches the style's media
type, and ignored otherwise. For example, if you write:
<head>
<style type="text/css"
media="print">
<!--
h1 { font-size: 10; text-align: center }
-->
</style>
</head>
you are indicating that
when the document is printed, the content of a first level header should be
rendered using a 10-point font and center-aligned.
The value of the media
attribute can be any one of the media type descriptors previously defined (all,
aural, braille, etc.). If you want to apply a style sheet to more than one
media type, you can separate the media type descriptors using a comma:
<head>
<style type="text/css"
media="print, screen">
<!--
h1 { font-size: 10; text-align: center }
-->
</style>
</head>
In this example, the media
attribute is set to print and screen.
Therefore, the first level header will appear the same on the printer as on the
screen.
Likewise, you can have
different style sheets associated with different devices as you will see in the
next exercise.
Try It Out – Using the
<style> Element to Handle Different Media Types
In this exercise, you
will create a simple document that will appear differently on the screen than
on the printed page.
1.
Type the following into your text editor:
<?xml
version="1.0" encoding="UTF-8"?>
<!DOCTYPE
html
PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>Tempest in Style</title>
<style type="text/css"
media="screen">
<!--
body { font-size: 18pt }
span.speaker {font-size: 18pt;
background-color: yellow}
span.stage {font-size: 18pt; font-style:
italic}
p.stage {font-size: 18pt; font-style:
italic; text-align: center}
-->
</style>
</head>
<body>
<p class="stage">Enter
certain Reapers, properly habited:<br />
they join with the Nymphs in a graceful
dance; towards<br />
the end whereof Prospero starts suddenly,
and speaks; after<br />
which, to a strange hollow, and
confused<br />
noise, they heavily vanish</p>
<p><span class="speaker">Prospero.</span>
<span
class="stage">(Aside)</span>
I had forgot that foul conspiracy<br
/>
Of the beast Caliban, and his
confederates<br />
Against my life: the minute of their
plot<br />
Is almost come. – <span
class="stage">(To the Spirits)</span>
Well done! Avoid; no<br />
more!</p>
</body>
</html>
2.
Save the file as style1.htm and run
it in your browser (we're using Microsoft Internet Explorer here). You should
see something like this:
3.
While running Microsoft Internet Explorer, select
the File | Print menu item. After your
document is printed, the print-out should look something like this:
4.
Compare the screen version of the document with the
printed version of the document. Notice the lack of text alignment, italics and
so on in the printed version.
5.
Edit the file style1.htm and
make the following change to the <head> section:
<head>
<title>Tempest in Style</title>
<style type="text/css"
media="screen, print">
<!--
body { font-size: 18pt }
span.speaker {font-size: 18pt;
background-color: yellow}
span.stage {font-size: 18pt; font-style:
italic}
p.stage {font-size: 18pt; font-style:
italic; text-align: center}
-->
</style>
</head>
6.
Save the file as style2.htm and run
it in your browser. You should see the same screen as before.
7.
From within your browser, select the File
| Print menu item. The printed document should now look something
like this:
8.
Notice that the text in the printed document is now
properly aligned and italicized. In addition, the font-size has been increased
to 18 point!
9.
Edit the file style1.htm (the
original file) and make the following changes in the <head>
section:
<head>
<title>Tempest in Style</title>
<style type="text/css"
media="screen">
<!--
body { font-size: 18pt }
span.speaker {font-size: 18pt;
background-color: yellow}
span.stage {font-size: 18pt; font-style:
italic}
p.stage {font-size: 18pt; font-style:
italic; text-align: center}
-->
</style>
<style type="text/css" media="print">
<!--
body { font-size: 10pt }
span.speaker {font-size: 10pt; font-weight:
bold}
span.stage {font-size: 10pt; font-style:
italic}
p.stage {font-size: 10pt; font-style:
italic; text-align: center}
-->
</style>
</head>
10.
Save the file as style3.htm and run
it in your browser. You should see the same screen as before.
11.
From within your browser, select the File
| Print menu item. The printed document should look something
like this:
12.
Notice that the text in the printed document is now
a 'normal' size and that the speaker's name is in bold.
How it Works
In Step 1, you created
an internal style sheet when you defined a style element inside the
head of the document:
<head>
<title>Tempest in Style</title>
<style type="text/css"
media="screen">
<!--
body { font-size: 18pt }
span.speaker {font-size: 18pt;
background-color: yellow}
span.stage {font-size: 18pt; font-style:
italic}
p.stage {font-size: 18pt; font-style:
italic; text-align: center}
-->
</style>
</head>
Since you assigned the
value screen to the style element's media
attribute, this style sheet pertains only to screen media devices. Within this
style sheet, we defined four basic styles:
the <body> element
the <span> element in the 'speaker' class (where the class
attribute is set to speaker)
the <span> element in the 'stage' class
the <p>
element in the 'stage' class
Text within the <body>
element has an 18-point font size; text within the 'speaker' <span>
element has a yellow background; text within the 'stage' (for stage direction) <span>
element is italicized; and text within the 'stage' <p>
element is italicized and center-aligned.
Looking now at the body
of the document, you will see how we applied these four styles to various text
elements:
<body>
<p class="stage">Enter
certain Reapers, properly habited:<br />
they join with the Nymphs in a graceful
dance; towards<br />
the end whereof Prospero starts suddenly,
and speaks; after<br />
which, to a strange hollow, and
confused<br />
noise, they heavily vanish</p>
<p><span
class="speaker">Prospero.</span>
<span
class="stage">(Aside)</span>
I had forgot that foul conspiracy<br
/>
Of the beast Caliban, and his
confederates<br />
Against my life: the minute of their
plot<br />
Is almost come. – <span
class="stage">(To the Spirits)</span>
Well done! Avoid; no<br />
more!</p>
</body>
The first paragraph:
<p
class="stage">Enter certain Reapers,… …they heavily
vanish</p>
was assigned to the
'stage' class.
The second paragraph was
not assigned to any class and so it defaults to the style of its parent
element: the <body> element. This second
paragraph includes three <span> elements. The first:
<span
class="speaker">Prospero.</span>
was assigned to the
'speaker' class. The second:
<span
class="stage">(Aside)</span>
was assigned to the
'stage' class. The third:
<span
class="stage">(To the Spirits)</span>
was also assigned to the
'stage' class.
When this document is
presented to the computer display device in Step 2, the style sheet associated
with the screen media type is selected and its contents applied to the various
elements in the document. In our case, the font-size is set to 18-point, the
speaker's background color is set to yellow, and the stage directions are
italicized.
At the time that this book was written, only Microsoft Internet
Explorer came close to supporting all of the CSS-1 and CSS-2 style sheet
properties. Unfortunately, Netscape Navigator's support is spotty, at best. We
will continue to user Microsoft Internet Explorer for the remaining examples in
this chapter.
In Step 3, you send the
document to the printer, which is a print media device. Since there is no style
sheet associated with the print media type, your web browser uses its own
default style sheet; the style sheet associated with the screen media type is
ignored.
In Step 5, we add the print media type to the style element:
<style
type="text/css" media="screen, print">
This means that the web
browser will use the same style sheet that was used for displaying the document
on the screen for the printing of the document on the page.
In Steps 6 and 7, we
compare the printed version of the document with the displayed version of the
document. Note that the text is properly italicized and aligned.
In Step 9, you add a
second <style> element, setting its media
attribute to print:
