CSS Media Type
The media type allows you to specify how the file will be presented in different media. The file can be displayed on the screen in different ways, on paper, or in an auditory browser, etc.
Some CSS properties only design certain media. For example, the voice-family attribute is designed for auditory user agents. Some other attributes can be used for different media types.
For example, the font-size property can be used for screens and printed media, but has different values. Documents on the screen and paper are different and usually require a larger font. The sans-serif font is more suitable for reading on the screen, while the serif font is easier to read on paper.
The @media rule allows different styles to be set for different media in the same style sheet.
The following example tells us that a 14-pixel Arial font style is displayed on the browser screen. But if the page is printed, it will be a Times font of 10 pixels. Please note that the font-weight is set in bold on the screen and on the paper:
<p class="test">Lots of tutorials on TutorialFish.com</p>
Try it yourself! If you are using Mozilla / Firefox or IE5+ to print this page, you will see that the media type will be displayed in another font with a smaller font size than other text.
Other Media Types
Note: The media type name is not case sensitive.
|all||Used for all media devices.|
|aural||Used in speech and audio synthesizers.|
|braille||Used for braille tactile feedback devices for blind people.|
|embossed||Braille printers used by blind people for sorting pages.|
|handheld||Used for small handheld devices.|
|print||Used for printers.|
|projection||Used for program presentation, such as slides.|
|screen||Used for computer monitors.|
|tty||Used for media that use fixed-density letter grids, such as teletypewriters and terminals.|
|tv||Used for TV-type equipment.|