CSS Media Types & Media Groups

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