CSS media types

Media types

Below are a list of current media types that are recognised by CSS.

CSS Type	Description
all	Works on all devices
screen	Designed for computer screens
print	For documents to be view in a ‘print preview’ mode
tv	Designed to be viewed on a TV screen
projection	Intended for presentations, for use with projectors etc
handheld	For handheld devices
tty	Designed for fixed pitch character grid
braille	For braille tactile feedback devices
embossed	Designed for paged braille printers
speech	For speech synthesisers

Import dependent media

Using the types above different style sheets can be imported for different media.

@import 'print.css' print;
@import 'speech.css' speech;
@import 'tv-screen.css' tv, screen;

Inner style sheets

The @media rule allows you to define multiple styles in a single document that are dependent on the media being used.

@media print
{
   .myStyle { color: #000000; }
   .myStyle2 { color: #FFFFFF; }
}
@media tv, screen
{
   .myStyle { color: #000FFF; }
   .myStyle2 { color: #FFF000; }
}

HTML media

An alternative is to specify the CSS within links in the head of a document.

<link href="screen.css" rel="stylesheet" media="tv, screen" type="text/css" />
<link href="braille.css" rel="stylesheet" media="braille" type="text/css" />