W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

Contents
7 Media types
7.1 Introduction to media types . . . . . . . . . . 77 .
7.2 Specifying media-dependent style sheets . . . . . . . 77 .
7.2.1 The @media rule . . . . . . . . . . . 78 .
7.3 Recognized media types . . . . . . . . . . . 78 .
7.3.1 Media groups . . . . . . . . . . . . 79 .
7.1 Introduction to media types
One of the most important features of style sheets is that they specify how a
document is to be presented on different media: on the screen, on paper, with a
speech synthesizer, with a braille device, etc.
Certain CSS properties are only designed for certain media (e.g., the
’cue-before’ property for aural user agents). On occasion, however, style sheets
for different media types may share a property, but require different values for
that property. For example, the ’font-size’ property is useful both for screen and
print media. However, the two media are different enough to require different
values for the common property; a document will typically need a larger font on a
computer screen than on paper. Experience also shows that sans-serif fonts are
easier to read on screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a section of a
style sheet -- applies to certain media types.
7.2 Specifying media-dependent style sheets
There are currently two ways to specify media dependencies for style sheets:
Specify the target medium from a style sheet with the @media or @import
at-rules.
Example(s):
@import url("loudvoice.css") aural;
@media print {
/* style sheet for print goes here */
}
Specify the target medium within the document language. For example, in
HTML 4.0 ([HTML40]), the "media" attribute on the LINK element specifies
the target media of an external style sheet:
77