Media Types in CSS Style Sheet

CSS Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. As the web evolves, it is becoming a lot more diverse, accessible to devises even Al Gore probably couldn't have predicted. We're all familiar with printing a page for offline viewing, though the support is now in place to make web pages viewable in handhelds, projection screens, TVs, for people with disability, and more. All this is great, but it doesn't just happen on its own. Conscious effort has to be made by us, the webmaster, to add this support, and one exciting way is through CSS.

Media types supported in CSS2

Media type names are case-insensitive.

Ways of specifying CSS Media types

There are 3 ways to attach a media type to the style sheet, so our CSS is applied only when a particular media (ie: handheld) is used to view the page:

1. Linked style sheets:
   
   <link rel="stylesheet" type="text/css" media="print" href="print.css">
   
   With the above declaration, "print.css" will only be applied to the page when it's printed (or viewed in Print Preview mode in your browser). You can add additional linked style sheets targeting other media types as well.
   
   As a side note, for XML documents, the equivalent of the above would be:
   
   <?xml-stylesheet type="text/css" media="print" href="print.css" ?>
    
2. Imported style sheets:
   
   <style type="text/css" media="print, handheld">
   @import "basic.css";
   </style>
   
   Imported style sheets used here has the advantage of being conditionally downloaded, meaning the style sheet will only be downloaded if the device matches that specified in the media attribute. In low bandwidth devices such as a handheld, any savings in unnecessary bandwidth could be significant. The disadvantage of this technique at present is the lack of browser/device support relative to technique 1) above.
    
3. Inline style sheets, through the @media rule:
   
   <style type="text/css">
   @media projection{
   body{ background-color:#FFFFFF; }
   #heading{ font-size:28px; }
   }
   </style>
   
   Whatever CSS declarations you wish be applied only for "Projection" should be wrapped around in the @media block.