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.
here 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.
- Specify the target medium within the document language.
The @media rule:
An @media rule specifies the target media types (separated by commas) of a set of rules.
Following is the example:
<style tyle="text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>
|
The document language:
In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet:
Following is the example:
<style tyle="text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>
|
Recognized media types:
The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Following is the list of various media types:
| Value | Description |
|---|---|
| all | Suitable for all devices. |
| aural | Intended for speech synthesizers. |
| braille | Intended for braille tactile feedback devices. |
| embossed | Intended for paged braille printers. |
| handheld | Intended for handheld devices (typically small screen, monochrome, limited bandwidth). |
| Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media. | |
| projection | Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media. |
| screen | Intended primarily for color computer screens. |
| tty | Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. |
| tv | Intended for television-type devices. |
NOTE: Media type names are case-insensitive.