CSS Media Types
CSS Media Types
One of the most important features of style sheets is that they specify how a document should be presented on different media: screen, paper, speech synthesizer, braille device, and so on.
There are currently two ways to specify media dependencies for a style sheet −
- Use
@mediaor@import at-rulesto specify the target media from within a style sheet.
-
Specify the target media within the document language.
@media Rules
The @media rule specifies a set of target media types (separated by commas) for the rule.
The following is an example −
<style style = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
} -->
</style>
Document Language
In HTML 4.0, the media attribute on the LINK element specifies the target media for an external style sheet.
Here 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>
Identified Media Types
The names chosen for CSS media types reflect the target devices on which the associated properties make sense. They give an idea of the device to which the media type refers. Below is a list of various media types −
| Number | Value and Description |
|---|---|
| 1 | all Applies to all devices. |
| 2 | aural For speech synthesizers. |
| 3 | braille For braille tactile feedback devices. |
| 4 | embossed For paginated braille printers. |
| 5 | handheld For handheld devices (typically small screens, monochrome, and limited bandwidth). |
| 6 | print For paged, opaque materials, and documents viewed on screen in print preview mode. See the section on paged media. |
| 7 | projection For projected presentations, such as from an overhead projector or printing to transparencies. See the section on paged media. |
| 8 | screen Primarily for color computer screens. |
| 9 | tty For media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. |
| 10 | tv For television-type devices. |
Note – Media type names are case-insensitive.