Introduction to CSS media and media types

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Link to a target medium</title>
<link rel="stylesheet" type="text/css" media="print, handheld" href="first.css">
</head>
<body>
<p>We are learning CSS media types in this part of the tutorial</p>
</body>
</html>

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