CSS Media Type
Media types allow you to specify how the file will be rendered in different media. The file can be displayed in different ways on the screen, on paper, or in an auditory browser, etc.
Media Type
Some CSS properties are only designed for certain media. For example, the "voice-family" attribute is designed for hearing user agents. Several other properties are available for different media types. For example, the "font-size" attribute can be used for screen and print media, but with different values. Screen and paper documents are different and usually require a larger font. Sans-serif fonts are better for reading on the screen, while serif fonts are easier to read on paper.
@media rules
@media rules allow different styles to be set for different media in the same style sheet.
The example below tells us to display a 14-pixel Verdana font style on the browser screen. But if the page prints, it will be in 10 pixel Times font. Please note that the font-weight is set to bold 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> You can try it yourself and see! If you print this page using Mozilla/Firefox or IE5+ you will see, "Media Types" will be displayed using another font that is smaller than the other text font size.
Other media types
Note: Media type names are not case-sensitive.
Media Type Description
all is used for all media devices.
aural
# Braille is used to give back the device for blind people.
embossed Braille printer for the blind for pagination.
handheld Used for small handheld devices.
PRINT for printers.
projection Used for project presentation, such as slides.
screen Used for computer monitors.
tty used for media that use a fixed-density letter grid, such as teletypewriters and terminals.
TV is used for TV -type devices.
Next Section