Wattle Software - producers of XMLwriter XML editor
 Home | Site Map 
XMLwriter
 Screenshots
 Features
 About Latest Version
 Awards & Reviews
 User Comments
 Customers
Download
 Download XMLwriter
 Download Plug-ins
 Download Help Manual
 Downloading FAQ
Buy
 Buy XMLwriter
 Pricing
 Upgrading
 Sales Support
 Sales FAQ
Support
 Sales Support
 Technical Support
 Submit a Bug Report
 Feedback & Requests
 Technical FAQ
Resources
 XML Links
 XML Training
 XMLwriter User Tools
 The XML Guide
 XML Book Samples
Wattle Software
 About Us
 Contact Details
Beginning XHTML

Buy this book

Back Contents Next

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:

 

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

 


BackContentsNext
©1999 Wrox Press Limited, US and UK.

Buy this book



Select a Book

Beginning XML
Beginning XHTML
Professional XML
Professional ASP XML
Professional XML Design...
Professional XSLT...
Professional VB6 XML
Designing Distributed...
Professional Java XML...
Professional WAP

© Wattle Software 1998-2019. All rights reserved.