The @media CSS at-rule allows you to specify a set of styles that are applied only to certain media types that you also specify in a @media declaration.

In other words, the @media rule specifies the target media types (separated by commas) of a set of statements or rules (delimited by curly braces). For example, the following snippet specifies a set of style rules that are to be applied to print media:

@media print {

    /* styles applied to print */
    body {
        font-size: 10pt;
    }

    a[href]:after {
        content: "(" attr(href) ")";
        /* ... */
    }

}
                

As shown in this example, the @media rule should be followed by the media type(s) and then by a set of style rules delimited in curly braces.

For a set of styles that you want to apply to more than one media type, you should separate the media types using commas:

@media screen {
    /* set of style rules that are applied to screen media */
}
                

There are ten recognized media types in CSS. See the Values section below for more information about each of them.

One of the most commonly used media types is the screen type. The print media type is used to specify styles for a printable document that apply when it is to be printed.

The screen media type is used as part of media queries. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features—such as size, orientation, color, etc.

Media queries are used to provide styles for a document or elements in a document depending on the conditions of the media in question. The most common use case is using media queries with the screen media type to specify styles that allow a web page or an element in a page to adapt to the different screen sizes and orientation, as part of a responsive web design workflow.

A media query is a logical expression that is either true or false. If the result of the query is true, that is, if the user agent is running in a media type that matches the specified media type, and if the conditions of the media type also match (for example screen size), then the style rules inside the media block will be applied.

For example, the following @media declarations will specify a set of styles for the screen media type depending on the screen size:

@media screen and (max-width: 35em) {
    /* styles applied when the page/app is viewed on a screen with a width less than or equal to 35em */
}

@media screen and (orientation: landscape) {
    /* styles applied when the page/app is viewed on a screen in a landscape mode */
}

@media screen and (orientation: portrait) {
    /* styles applied when the page/app is viewed on a screen in a portrait mode */
}

@media handheld and (min-width: 20em), 
       screen and (min-width: 20em) {
    /* styles applied on screen and handheld devices if the width of the viewport is greater than 20em. */
}

@media screen and (device-aspect-ratio: 16/9) {
    /* styles applied to screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9") */
}
                

There is a list of possible media queries that are used as conditions to the specified media types, including orientation, viewport width, device width, viewport height, color, aspect ratio, among others. For more information about them, check the Media Queries specification for a list of possible values and many examples.

You can declare the @media rules anywhere inside your style sheet. You can even choose to use a separate style sheet for @media declarations and then import it into the main style sheet using the @import at-rule.