Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

CSS Media Types

Displaying Your Pages Differently to Different Media

By Jennifer Kyrnin, About.com

CSS media types allow you to format your documents to display correctly on various types of media, such as on the screen, on paper or in braille.

The valid media types are:

  • all
    The styles should be used for all media types.
  • screen
    The styles should be used on color computer screens.
  • print
    The styles should be used on paper formats and documents viewed in "print preview" mode.
  • tv
    The styles should be used on television style devices, with low resolution, color and sound.
  • handheld
    The styles should be used on small, usually monochrome, devices such as phones or PDAs.
  • projection
    The styles should be used with projection devices like overheads.
  • tty
    The styles should be used on teletype style devices with a fixed-pitch character grid.
  • aural
    The styles should be used with speech synthesizers.
  • braille
    The styles should be used with braille devices.
  • embossed
    The styles should be used on paged braille printers.

You can define media types in several ways:

<style media="all"> ... </style>
@media print { p { font-size: 14pt;} }
@import url("import.css") tv;

Browser Support

Netscape 4 only recognizes the "screen" media type - and it only recognizes it in the first example. IE 4 Windows and 4 and 5 Macintosh don't support the @media or @import media type designations.

Explore Web Design / HTML

About.com Special Features

Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. CSS
  5. CSS Media Types - Displaying Pages Differently

©2009 About.com, a part of The New York Times Company.

All rights reserved.