CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES

CSS @media rule

Topic: CSS3 Properties ReferencePrev|Next

Description

The @media rule can be used to define style rules for multiple media types in a single style sheet. It must be followed by a comma-separated list of media types and a block that contains rules.


Syntax

The syntax of this at-rule is given with:

@media media type,... {
    /* media-specific rules */
}

The example below shows the @media property in action.

  • @media screen{
  •     body {
  •         color: #32cd32;
  •         font-family: Arial, sans-serif;
  •         font-size: 14px;
  •     }
  • }
  • @media print {
  •     body {
  •         color: #ff6347;
  •         font-family: Times, serif;
  •         font-size: 12pt;
  •     }
  • }
  • @media screen, print {
  •     body {
  •         line-height: 1.2;
  •     }
  • }

Note: Style rules outside of @media rules apply to all media types that the style sheet applies to. At-rules inside @media are invalid in CSS2.1


Browser Compatibility

The @media rule is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 9+
  • Apple Safari 1.3+
  • Opera 9.2+

Further Reading

See tutorial on: CSS Media Types.

Your Feedback:

We would love to hear from you, please drop us a line.