Post
Ask Question

CSS Media Types

Introduction

 
CSS provides different Media Types for different purposes. Through the use of Media types, different layouts are used for specific devices. As one layout for handheld devices, one for print and one for the screen.
 
Media types
 
CSS provides various properties for different media types. Some CSS properties are designed for certain specific Media Types and some properties are designed for different Media Types. For Example, "voice-family" property can not be used for different Media Types. It is only used for aural user agents. But the properties like "font-size" can be used for two media Screen and Print. Values of the property may also Different. Most of the time the documents need a much larger font on screen than to paper. This all different because of the need and requirement. As sans-serif font is easier to read on the screen but serif font is easy to be read on the printed page.
 
Rule @media
 
@media rule allows us to use different style rule for different media with in single style sheet.
 
The media type names are not case-sensitive.
 
Example
  1. <html>  
  2.   
  3.   <head>  
  4.     <style>  
  5.     @media screen,  
  6.     print   
  7.     {  
  8.       p.test {  
  9.         font-weight: bold;  
  10.       }  
  11.   
  12.     }  
  13.   
  14.     @media print   
  15.     {  
  16.       p.test {  
  17.         font-family: times, serif;  
  18.         font-size: 10px;  
  19.       }  
  20.   
  21.     }  
  22.   
  23.     @media screen   
  24.     {  
  25.       p.test {  
  26.         font-family: verdana, sans-serif;  
  27.         font-size: 14px;  
  28.       }  
  29.   
  30.     }  
  31.     </style>  
  32.   </head>  
  33.   
  34.   <body>  
  35.   </body>  
  36.   
  37. </html> 
Here in a style tag, we define 3 @media rules
  1. @media screen, print
  2. @media print
  3. @media screen
If you see the code on the screen the font family will be Verdana, sans-serif, font-size will be 14px and the font-weight will be bold. and if you print the same page then the font the family will be times, serif and the font size will be 10px but the font-weight will be bold.