Expand All | Collapse All

CSS @media rule

Topic: CSS3 Properties ReferencePrev|Next


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.


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.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties