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.
We have 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.
Given below is an 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 an 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. Given below is a 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).
|
|
print
|
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.
