CSS Media Types & Media Groups - @media Rule Syntax with Examples

CSS Media Types: These CSS Media Types specify how the document should be present on different types of media. There are different types of properties are designed for particular media. The style sheets for different media types can share a property but must and should require different values. It is most important to specify a style sheet, a section of the style sheet and applies to particular media types.

CSS Media Type Syntax

There are two ways to specify media dependencies for style sheets:

1. Specify the target medium with the @media or @import at-rules from the style sheets.

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

2. Specify the target medium inside the document language.

<!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="foo.css">
</HEAD>
<BODY>
<P>The body...
</BODY>
</HTML>

The @media rule

An @media rule specifies the target media types to a set of statements. The @media construct allows the style sheet rules for various media in the same style sheet.

The @media rule Example

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}

Recognized Media Types

The names of CSS media types will have impact target devices where the relevant properties make sense. In the below-mentioned list of CSS media types, the names of media types are relative, but the descriptions are irrelative. Likewise, the “Media” field in the description of each property is irrelative.

all	can be used for all devices
braille	For braille tactile feedback devices.
embossed	For paged braille printers
handheld	For handheld devices. Intended for handheld devices (typically small screen, limited bandwidth).
print	documents in print preview mode.
projection	for projectors
screen	primarily color for computer screens.
speech	speech synthesizers
tty	for fixed-pitch character grid
tv	television type devices

The CSS Media type names are case sensitive. The Media types are mutually exclusive which the user can one media type at once.@media and @import rules with unknown media types are treated as they are not present. If an @media or @import rule contains a not an identifier type data then the statement is invalid.

CSS Media Type Example

In the following example rule on p, element applies in screen mode even though 3d media is not known

@media screen, 3D {
P { color: green; }
}

Media Groups

Every CSS property defines which media type property applies to, if most of the properties apply to multiple media types then “applies to media” specify every property lists than individual media types.

CSS Media Groups

continuous or paged.
visual, audio, speech, or tactile.
grid or bitmap.
interactive or static.

Relationship between Media Groups and Media Types

The following table shows the relationships between media groups and media types:

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