1. Computing

Discuss in my forum

CSS Media Types

Displaying Your Pages Differently to Different Media

By , About.com Guide

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.

©2013 About.com. All rights reserved.