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