CSS media types
Media type allows you to specify how the document will be presented in different media. The file can be displayed in different ways on the screen, on paper, or hearing browser, etc.
media type
Some CSS properties are only designed some of the media. Such as "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, "font-size" property can be used to screen and print media, but have different values. Screen and on paper files differ, usually require a larger font, sans - serif font is more suitable for reading on screen, while serif fonts are easier to read on paper.
@media rule
@media rule allows the same style sheets for different media set different styles.
In the following example tells us to display a 14 pixels Verdana font style on the browser screen. However, if the page printed will be 10 pixels Times font. Please note, font-weight paper and on the screen setting in bold:
<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 are using Mozilla / Firefox or IE5 + print this page, you'll see, "Media Types" will use another display than other Text size small point font.
Other media types
Note: The media type names are not case sensitive.
| media type | description |
|---|---|
| all | For all media devices. |
| aural | For speech and audio synthesizer. |
| braille | With tactile feedback device for the blind Braille. |
| embossed | Blind for paged Braille printers. |
| handheld | For handheld devices small. |
| For a printer. | |
| projection | Program for display, such as slides. |
| screen | For computer monitors. |
| tty | For using a fixed grid of letters density media, such as teletypes and terminals. |
| tv | For TV type of device. |