|
|
 |
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.
-
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>
-
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:
-
While running Microsoft Internet Explorer, select the File | Print menu item. After your document is printed, the print-out should look something like this:
-
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.
-
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>
-
Save the file as style2.htm and run it in your browser. You should see the same screen as before.
-
From within your browser, select the File | Print menu item. The printed document should now look something like this:
-
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!
-
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>
-
Save the file as style3.htm and run it in your browser. You should see the same screen as before.
-
From within your browser, select the File | Print menu item. The printed document should look something like this:
-
Notice that the text in the printed document is now a 'normal' size and that the speaker's name is in bold.
|
|
