Source -http://meyerweb.com/eric/articles/webrev/200001.html
There are a variety of ways to associate media-specific stylesheets to a
document. The most familiar way is to use the <LINK rel="stylesheet" type"text/css" href="print.css" media="print"> In the previous example, we see that the stylesheet There are currently ten defined media types:
These media types are described in some detail in Chapter 7 of the CSS2
specification. The most important is There are other ways to assign media to stylesheets. For example, you can list one or more media types on an @import statement: @import url(paged.css) print,projection; Thus, the styles in <LINK rel="stylesheet" type"text/css" href="print.css" media="print,projection"> @import url(print.css) print,projection; There is one other way to apply media-specific styles: the <STYLE type="text/css"> @media print { BODY {font-size: 10pt; line-height: 120%; background: white;} } @media screen { BODY {font-size: medium; line-height: 1em; background: silver;} } </STYLE> Restyling for PrintLet's now look at a real example of alternate-media stylesheets. In order for these examples to work, you'll need to be using MSIE5/Win or MSIE4.5/Mac, and it will be helpful (though not strictly necessary) if you have a printer handy. Navigator 4.x does not support alternate media on any platform, so it won't be much help with these examples. First, let's assume a simple page of text with some various elements:
paragraphs, headings, hyperlinks, and so on. This file is called /* screen display styles */ BODY {color: silver; background: black;} A:link {color: yellow; background: #333333; text-decoration: none;} A:visited {color: white; background: #333333; text-decoration: none;} A:active {color: black; background: white; text-decoration: none;} H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px; border-bottom: 1px solid gray;} This will give us a page something like that shown in Example 1. Note the ad banner, which is a feature common to so many sites. All right, now we need to decide how the printed page should look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this: /* print styles */ BODY {color: black; background: white;} A:link, A:visited {background: white; color: black; text-decoration: underline; font-weight: bold;} H1, H2, H3 {background: white; color: black; padding-bottom: 1px; border-bottom: 1px solid gray;} DIV.adbanner {display: none;} We've added the last style in order to get rid of the ad banner in the printed version. To get an idea of what this will look like, take a peek at Example 2. Realize that this is a screen approximation of a printout, but for the moment, it will do. Now, to the top of the document, we add the following <LINK rel="stylesheet" type"text/css" href="screen.css" media="screen"> <LINK rel="stylesheet" type"text/css" href="print.css" media="print"> Thus we get the document shown in Example 3, which has the screen appearance of Example 1 but the printed appearance of Example 2-- load it up in MSIE, print it out, and see what happens! (If you'd like to see another example of print-media stylesheets in action, try printing out the CSS Support Grid.) Just the Tip of the IcebergOf course, the simple examples I've provided are just a beginning. There is almost no limit to what can be done with alternate-media stylesheets. Using them appropriately is the key to creating pages which can be styled for regular screen output, printing, legible display on handheld devices, special styles for the blind, and much more. As browsers add support for more media, and more ways to set up media-specific styles, we'll return to this subject for more. Until then, try out some print-media stylesheets on your pages, and see how you can make your site better-- and more accessible-- than ever.
Source- http://meyerweb.com/eric/articles/webrev/200001.html
|