CSS Media Types

You can use CSS to change the appearance of your web page depending on the media type that's viewing it.

For example, you can specify one font for when your web page is viewed on a computer screen and another for when it's viewed with a handheld device or braille device.

Recognized CSS Media Types

Media TypeDescription
allFor all media type devices.
auralFor speech synthesizers
brailleFor braille tactile feedback devices
embossedFor paged braille printers
handheldFor handheld devices
printFor printed versions and print preview on the screen.
projectionFor projected presentations such as projectors and transparencies.
screenComputer screens.
ttymedia using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
tvTelevision-type devices

There are two methods for creating separate styles depending on the media type:

  • Use the @media rule. For example:

    @media print
    p.bodyText {font-family:georgia, times, serif;}
  • Use the media attribute when linking to an external style sheet. For example:

    <link rel="stylesheet" type="text/css" media="TV" href="/css/tv_version.css">

To see how the media type can be used to separate the print styles from the screen styles, view the CSS Print Version page.