Attribute for <STYLE ...>
MEDIA

MEDIA sets the media (screen, print, etc) that the style applies to. By default (i.e. if you don't use MEDIA at all), then the style applies to all types of media. MEDIA is most handy for setting styles that apply to printing but not to the screen, and vice versa. MEDIA works the same as <LINK MEDIA="...">.

For example, suppose that you wanted links to look as they would by default on the screen (usually blue or purple, and underlined), but you want them to look like any other text when printed. To do this you would create a style that applies only to printed media and set the text-decoration and color properties of links:

<STYLE TYPE="text/css" MEDIA="print">
<!--
a, a:link, a:visited {
    text-decoration:none;
    color:black;
}
-->
</STYLE>

As often happens, style definitions can overlap, in this case the anchors inheriting from the navbar class and keeping their blue color when printing, so we'll override navbar for our example:

<STYLE TYPE="text/css" MEDIA="print">
<!--
a, a:link, a:visited,
.navbar a, .navbar a:link, .navbar a:visited
    {
    text-decoration:none;
    color:black;
    }
-->
</STYLE>

This example was applied to this page. The links on this page look normal on your screen. However if you print the page you'll see that the links look like regular text (assuming your browser understands these style rules, which most visual browsers do).

In the reverse case -- applying styles only to the screen but not to the printed page -- a popular choice is to create elements that are hidden on the screen but which appear when printed. For example, suppose you wanted to emphasize the copyrighted nature of your page when it is printed but hide the extra notice when on the screen. To do something like this, you would first create a style that only applies to the screen and which designates that a class named copyright is not displayed:

<STYLE TYPE="text/css" MEDIA="screen">
<!--
.copyright {
    display:none;
}
-->
</STYLE>

Then simply apply this class to an element and that element won't appear on the screen but will when printed:

<DIV CLASS="copyright">
<HR>
Copyright 2001 Idocs.com  All rights reserved.
<HR>
</DIV>

For more details about media types see W3's page on media descriptors.