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
Media types are case sensitive.

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" />



No tags