Introduction to CSS media and media types

Media and media types

One very important specification made by style sheet is, on which media a web document will be presented; whether it is screen, paper, speech synthesizer, braille device etc.

This is very important since there are certain CSS properties which are used only in a particular media. And again, there are properties which is common for more than one media but they need different value for being rendered in different media. For example, size of fonts need to be larger in screen media than that of a paper. So, value of the font-size property, responsible for size of fonts are different in screen and paper.

In this section, we will discuss following topics:

  • Specifying media-dependent style sheets.
  • The @media rule.
  • Recognized media types.
  • Media groups.

Specifying media-dependent style sheets

There are several ways to specify on which media a particular style sheet will works.

@media or @import at-rules.

The first and most commonly used way of specifying media dependencies of a stylesheet is to
use @media or @import within a rule for which you want to specify media dependency.

Here is an example stylesheet for having different stylesheets for screen and print :

@import url("style_screen.css") screen;
@media print {
/* style sheet for print media goes here */

In the example above we have a stylesheet called style_screen.css for screen and if it is print media we have separate stylesheet for that (i.e. styles mentioned within @media print {}).

Specify the target medium within the document language.

We will take help of the following example for understanding this :

<title>Link to a target medium</title>
<link rel="stylesheet" type="text/css" media="print, handheld" href="first.css">
<p>We are learning CSS media types in this part of the tutorial</p>

Now in this example, media type is mentioned using MEDIA="print,handheld" within the link tag of the concerned html document.

The @media rule

@media-rule is used to specify the target media types of a set of statements enclosed within a pair of curly braces (i.e. {}). It is possible to specify more than one media type separated by comma for a single set of statements stating styles.

Example of @media rule

Here is an example stylesheet for using @media rule :

@media print {
body { font-size: 10pt }
@media screen {
body { font-size: 12px }
@media screen, print {
body { color: navy }

CSS recognized media types

Here is a chart of recognized media types and there scope in a nutshell:

all Suitable for all devices
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen, limited bandwidth).
print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen Intended primarily for color computer screens.
speech Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

CSS Media groups

Since a set of statements for styling can be applied to more than one media types, instead of mentioning individual media types, a media group which denotes a collection of media types, is used. Here is a chart displaying different media types against the media groups they belong to.

Media Types Media Groups
  continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static
braille continuous tactile grid both
embossed paged tactile grid static
handheld both visual, audio, speech both both
print paged visual bitmap static
projection paged visual bitmap interactive
screen continuous visual, audio bitmap both
speech continuous speech N/A both
tty continuous visual grid both
tv both visual, audio bitmap both

Previous: CSS Font Families
Next: CSS (foreground) color

Follow us on Facebook and Twitter for latest update.