CSS - Media Types

Quiz

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, with a braille device, etc.

We have 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

An @media rule specifies the target media types (separated by commas) of a set of rules.

Given below is an example −

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

The Document Language

In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet −

Following is an example −

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

Recognized Media Types

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Given below is a list of various media types −

Sr.No.	Value & Description
1	all Suitable for all devices.
2	aural Intended for speech synthesizers.
3	braille Intended for braille tactile feedback devices.
4	embossed Intended for paged braille printers.
5	handheld Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
6	print Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
7	projection Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.
8	screen Intended primarily for color computer screens.
9	tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
10	tv Intended for television-type devices.

NOTE − Media type names are case-insensitive.

Print Page