CSS 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.
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). |
|
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.