CSS media types


CSS Media Types

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 setting different styles 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! Print this page if you are using Mozilla/Firefox or IE5+ , you will see that "Media Type" will be displayed using another font that is a little smaller than the other text font size.

Other media types

Note: Media type names are not case-sensitive.

Media TypeDescription
allFor all media devices.
aural for speech and audio synthesizers.
braille Braille tactile feedback device for blind people.
embossed Braille printer for the blind for pagination.
handheldUsed for small handheld devices.
print is used for printers.
projection is used for solution presentation, such as slides.
screen is used for computer monitors.
tty is used for media that use a fixed-density letter grid, such as teletypewriters and terminals.
tvFor TV type equipment.