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.