@media

Version: Level 2

Compability: IE5+ N6+

Syntax:: @media media-type, ... { selector { property: value; ...; } ... };

The @media at-rule is used to set the target media for a collection of style rules on a document level.

The optional media-type component is a list of zero or more media types which are delineated (separated) by commas. If left blank, the default is all media types. Some of the permitted values are:

all - the default.
aural - speech synthesizers.
braille - braille tactile feedback devices.
embossed - paged braille printers.
handheld - handheld devices.
print - printed paged and print preview.
projection - projectors or print to transparencies.
screen - color computer screens.
tty - teletypes.
tv - television-type devices.

The mandatory selector { property: value; ...; } component is a list of one or more style rules. Each style rule is a property/value pair. You can have a unlimited number of selector components. They are delineated (separated) by blank space.

The syntax for an at-rule is an @ symbol, followed immediately by an unique identifier, which in turn is followed by the block which contains content that is applied on a document level. The block syntax is either:

all content contained between a pair of curly brackets,
or is all content contained between the unique identifier and a semi-colon.

There are five at-rules: @charset, @font-face, @import. @media, and @page.

Examples

Code:

@media print {
   p { color: black; font-face: arial; }
   a:visited { text-decoration: underline; font-weight: bold;}
}

DevGuru

CSS2 » Other » @media

Examples

Code:

Language(s): CSS2

See Also: