CSS :: Media Types

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 }

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">
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">

            <p>the body...

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
1allSuitable for all devices.
2auralIntended for speech synthesizers.
3brailleIntended for braille tactile feedback devices.
4embossedIntended for paged braille printers.
5handheldIntended for handheld devices (typically small screen, monochrome, limited bandwidth).
6printIntended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
7projectionIntended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.
8screenIntended primarily for color computer screens.
9ttyIntended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
10tvIntended for television-type devices.

Leave a Reply

Your email address will not be published. Required fields are marked *