Beginning XHTML | 7 | WebReference

Beginning XHTML | 7

To page 1To page 2To page 3To page 4current page

Beginning XHTML

How it Works

In Step 1, you created an internal style sheet when you defined a style element inside the head of the document:

  <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}

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:

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:

  <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 />

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:

<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}

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.

To page 1To page 2To page 3To page 4current page

Created: March 27, 2001
Revised: March 27, 2001