Beginning XHTML | 6

To page 1To page 2To page 3current pageTo page 5
[previous] [next]

Beginning XHTML

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:
    1
  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:
    2
  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:
    3
  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:
    4
  12. Notice that the text in the printed document is now a 'normal' size and that the speaker's name is in bold.
To page 1To page 2To page 3current pageTo page 5
[previous] [next]

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

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