With media types a page can have one layout for screen, one for
print, one for handheld devices, etc.
Media Types
Some CSS properties are only designed for a certain media. For example the
"voice-family" property is designed for aural user agents. Some other
properties can be used for different media types. For example, the
"font-size" property can be used for both screen and print media, but
perhaps with different values. A document usually needs a larger font-size on a
screen than on paper, and sans-serif fonts are easier to read on the screen, while
serif fonts are easier to read on paper.
The @media Rule
The @media rule allows different style rules for different media in the same style sheet.
The style in the example below tells the browser to display a 14 pixels
Verdana font on the screen. But if the page is printed, it will be in a 10
pixels Times font. Notice that the font-weight is set to bold, both on screen
and on paper:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
Other Media Types
Note: The media type names are not case-sensitive.
| Media Type |
Description |
| all |
Used for all media type devices |
| aural |
Used for speech and sound synthesizers |
| braille |
Used for braille tactile feedback devices |
| embossed |
Used for paged braille printers |
| handheld |
Used for small or handheld devices |
| print |
Used for printers |
| projection |
Used for projected presentations, like slides |
| screen |
Used for computer screens |
| tty |
Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv |
Used for television-type devices |
