CSS Media Type
CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both 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>
The third way to specify a media type is to use the @text rule. This allows you to import a stylesheet but only use it for a specific set of media types. Note, however, that it is not supported in Internet Explorer, and the stylesheet will not be imported for any media type:
p { color: green; } @media screen, projection, tv { #foo { position: absolute; } } @media print { #navi { display: none; } } @media handheld { #foo { position: static; } }