Application of the Different Styles
October 30, 2000
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>
as assigned to the 'stage' class. The third:
<span class="stage">(To the Spirits)</span>
as also assigned to the 'stage' class.
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:
<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>
Having two different internal style sheets means that you can have two
entirely different presentations for the screen and the printed page. In
Step 9, you changed the font-size from 18-point to 10-point and used a bold
font for printing rather than the colored background used on the screen.
While using media-dependent internal style sheets is very simple, there are
some inefficiencies that become more apparent as you add support for more
and more devices. Quite simply, the files will get large – one way around
this problem is to use external style sheets.
Different Style Sheets for Different Devices
Beginning XHTML
Using the <link> Element
|
