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