Attribute for
<STYLE ...> MEDIA MEDIA MEDIA MEDIA <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
<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
<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>
Copyright 2001 Idocs.com All rights reserved. For more details about media types see W3's page on media descriptors.
|