CSS media type

one of the most important features of style sheets is that they specify how a document is to be presented on different media:on the screen, on paper, with a speech synthesizer etc.

here are currently two ways to specify media dependencies for style sheets.

  • specify the target medium from a style sheet with the @media or @import at-rules.
  • specify the target medium within the document language.

the @media rule -

the @media rule specifies different style sheet rules for different media in the same style sheet.

the media type name are not case-sensitive.

the @media construct allows style sheet rules for various media in the same style sheet.

        <html>
        
        <head>
        
        <style >
        
        @media screen
        {
         p.font{ font-style:italic; text-decoration:underline;  font-size:15px ;}
        }
        @media print        
        {
            p.font{font-style:bold; text-transform:capitalize;font-size:10px;}
        }
        @media  screen, print        
        {
        
           body { font-style:bold; text-transform:capitalize;  font-size:10px ; text-decoration:underline ;}
        }
        </style></head>
        
        <body>
        
            <p class="font">this is the paragraph and see the effect of media style sheet .</p>
            
   </body>
 
 </html>

all css media types

media typedescription
allused for all media type devices.
auralintended for speech synthesizers.
brailleintended for braille tactile feedback devices.
enbossedintended for paged braille printers.
handheldused for handheld devices.
printused for printers.
projectionused for projected presentations(e.g projectors.)
screenused for computer screen.
ttyintended for media using a fixed-pitch character grid(e.g teletypes, terminals, or portable)
tvused for television type devices.