You are here: Reference > CSS > at-rules > media

@media rule

Browser support:
Allows to define different style rules for different media.
With Media Types you can specify how documents will be presented in different media. The contents of documents and elements can be displayed differently on printed material, on the screen, etc.
In Javascript, the cssRules collection contains the CSS rules of a stylesheet, and the CSSMediaRule object represents a @media rule. The cssRules collection is not supported in Internet Explorer before version 9 and there is no way to access to a @media rule in those browsers.

Syntax:

@media typeList {
rules
}
typeList - A comma-separated list of media types.
rules - Style rules.

Media types:

all Default. All devices.
aural Speech synthesizers.
braille Braille tactile feedback devices.
embossed Paged braille printers.
handheld Handheld devices.
print Printed pages and print preview.
projection Projectors or transparent prints.
screen Color computer screens.
speech Intended for speech synthesizers.
tty Teletypes.
tv Television-type devices.

Examples:

<html>
    <head>
        <style>
            @media screen {
                span.test {
                    font-family:verdana;
                    font-size:14px;
                }
            }

            @media print, aural {
                span.test {
                    font-family:serif;
                    font-size:10px
                }
            }
        </style>
    </head>
    <body>
        <span>test content</span>
    </body>
</html>
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content