14.1 Designating Medium-Specific Style Sheets
You can restrict any kind of style sheet
to a specific medium, thanks to the mechanisms defined in HTML and
CSS. For HTML-based style sheets, you can impose medium restrictions
through the media attribute. This
works the same for both the link and
style elements:
<link rel="stylesheet" type="text/css" media="print"
href="article-print.css">
<style type="text/css" media="projection">
body {font-family: sans-serif;}
</style>
The media attribute can accept a single medium
value or a comma-separated list of values. Thus, to link in a style
sheet that should be used in only the screen and projection media,
you would write:
<link rel="stylesheet" type="text/css" media="screen, projection"
href="visual.css">
In a style sheet itself, you can also impose medium restrictions on
@import rules:
@import url(visual.css) screen, projection;
@import (article-print.css) print;
Remember that if you don't add medium information to
a style sheet, it will be applied in all media.
Therefore, if you want one set of styles to apply only on screen, and
another to apply only in print, then you need to add medium
information to both style sheets. For example:
<link rel="stylesheet" type="text/css" media="screen"
href="article-screen.css">
<link rel="stylesheet" type="text/css" media="print"
href="article-print.css">
If you were to remove the media attribute from the
first link element in the preceding example, the
rules found in the style sheet
article-screen.css would be applied in all
media, including print, projection, handheld, and everything else.
CSS2 also defines syntax for @media blocks. This lets
you define styles for multiple media within the same style sheet.
Consider this basic example:
<style type="text/css">
body {background: white; color: black;}
@media screen {
body {font-family: sans-serif;}
h1 {margin-top: 1em;}
}
@media print {
body {font-family: serif;}
h1 {margin-top: 2em; border-bottom: 1px solid silver;}
}
</style>
Here you see that in all media, the body element
is given a white background and a black foreground. Then a block of
rules is provided for the screen medium alone,
followed by another block of rules that applies only in the
print medium.
@media blocks can be any size, containing any
number of rules. In situations where authors may have control over a
single style sheet, @media blocks may be the only
way to define medium-specific styles. This is also the case in
situations where CSS is used to style a document using an XML
language that does not contain a media attribute
or its equivalent.
|