CSS Media Types

Media types allow you to specify how a document will be presented in different media. The document can be displayed differently on a screen, on paper, or in an auditory browser, among others.

Media Types

Some CSS properties are designed for certain media. For example, the voice-family property is specifically for auditory user agents. Other properties can be used for different media types. For instance, the font-size property can be used for both screen and print media, but with different values. Documents on screen and paper are different, often requiring a larger font size. Sans-serif fonts are more suitable for reading on screens, while serif fonts are easier to read on paper.

@media Rule

The @media rule allows different styles to be defined for different media within the same style sheet.

The following example tells the browser to display a 14-pixel Verdana font style on the screen. However, if the page is printed, it will be a 10-pixel Times font. Note that the font-weight is set to bold both on screen and on paper:

Example

@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;}
}

You can try it yourself! If you print this page using Mozilla/Firefox or IE5+, you will see that the media type uses a smaller font size than the other text.

Other Media Types

Note: Media type names are case-insensitive.