CSS - Media Types

Advertisements

Previous Page
Next Page  

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.

Advertisements