Different Style Sheets for Different Devices
October 30, 2000
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.
Associating Style Sheets with Media Types
Beginning XHTML
Application of the Different Styles
|
