CSS Media Types

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 Type	Description
all	For all media type devices.
aural	For speech synthesizers
braille	For braille tactile feedback devices
embossed	For paged braille printers
handheld	For handheld devices
print	For printed versions and print preview on the screen.
projection	For projected presentations such as projectors and transparencies.
screen	Computer screens.
tty	media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
tv	Television-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.