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:

<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 element in the 'speaker' class (where the class attribute is set to speaker)
the element in the 'stage' class
the element in the 'stage' class

Text within the <body> element has an 18-point font size; text within the 'speaker' element has a yellow background; text within the 'stage' (for stage direction) element is italicized; and text within the 'stage' 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 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}
-->
</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.

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010
Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Downloads and eKits

Tutorials and Demos

URL: http://webreference.com/authoring/languages/xhtml/beginning/chap13/1/