1. CSS Tutorial
2. Using CSS in HTML
3. CSS Properties and CSS Rules
4. CSS Selectors
5. CSS Inheritance
6. CSS Precedence
7. CSS Box Model
8. CSS margin
9. CSS padding
10. CSS border
11. CSS Units
12. CSS Colors
13. CSS Text Styling
14. CSS List Styling
15. CSS Table Styling
16. CSS Link Styling
17. CSS Form Styling
18. CSS Image Styling
19. CSS Background Images
20. CSS Gradients
21. CSS Box Shadow
22. CSS display
23. CSS float
24. CSS position
25. CSS Media Queries
26. CSS Column Layout
27. CSS opacity
28. CSS Web Fonts
29. CSS 2D Transformations
30. CSS Transitions

• Inserting Media Queries
• Media Query Syntax
• Media Query Examples

CSS media queries enable you to apply different CSS styles in your HTML page depending on the device that shows the HTML page. More specifically, media queries enable you to apply different styles depending on the browser window width, device screen width, type of device, aspect ratio and pixel ratio. In many cases it is enough to base your media queries on the browser window width, though.

Inserting Media Queries

CSS media queries can be inserted in your HTML pages in the following ways:

• Inserted into a <link> element which refers to a CSS style sheet.
• Inserted before an @import CSS instruction in CSS style sheet.
• Inserted inside a CSS style sheet.

An example is shown below for each of these methods:

<link rel="stylesheet" href="mycss.css" media="only screen and (max-width: 1200px)">

This example shows how to add media queries to a link element. Only if the conditions in the media query is met is the CSS file applied to the HTML document.

@import url('my-other-css.css') only screen and (max-width: 1200px);

This example shows how to import a CSS style sheet from within another CSS style sheet. You can append a media query to the @import instruction. Only if the conditions in the media query are met is the CSS file imported and applied.

@media only screen and (max-width: 1200px) {
    /* css rules */
}

This example shows how to insert media queries directly into a CSS style sheet. Only if the conditions in the media query are met are the CSS rules inside the media query block applied.

Media Query Syntax

The syntax of a media query is the same no matter if you use it inside a link element, after an @import instruction, or inside a CSS style sheet. Media queries follow this syntax:

[logic] [media] [and (condition)] [and (condition)] ...

For the [logic] token you can use one of the values:

The the [media] token you can use one of these values:

There are more media types, but not all of them are supported by the browser at the time of writing. You can find a full list at http://www.w3.org/TR/CSS21/media.html.

The [and (condition)] blocks set conditions for the screen. For instance, you can use these properties inside a condition block:

As you might have spotted, the condition properties fall into two groups: The first group is related to the width and height of the browser window, and the second group is related to the width and height of the physical device screen. On a desktop computer, the browser window width may change if the browser is resized by the user, but the device width does not change. That is static (unless the user changes screen resolution on the graphics card).

On a mobile device the browser window width and device width are typically the same, as the browser typically takes up the whole device screen. However, if the user changes orientation of the device, the device width becomes device height and vice versa.

Media Query Examples

Here are a few media query examples:

<style>
    @media only screen and (max-width: 600px) {
        /* CSS rules for browser widths equal to or less than 600px */
        body { background-color: #ffffff; }
    }
    @media only screen and (min-width: 601px) and (max-width: 1200px) {
        /* CSS rules for browser widths from 601px to 1200 px */
        body { background-color: #ff0000; }
    }
    @media only screen and (min-width: 1201px) {
        /* CSS rules for browser widths from 1201px and up */
        body { background-color: #0000ff; }
    }
</style>

These three media queries match different browser window widths. The first media query matches all browser widths less than or equal to 600 pixels. That means that all CSS rules listed inside the body of the media query (inside { ... } ) will only be applied if the browser window width is 600px or less.

The second media query matches browser window widths from 601 pixels to 1200 pixels. CSS rules inside the body of the media query will only be applied if the browser window width falls in this interval.

The third media query matches browser window widths from 1201 pixels and up. CSS rules inside the body of the media query will only be applied if the browser window width are 1201 pixels or more.

In the examples each media query only has a single CSS rule inside the body, setting the background color. In a real web application or website you could have more CSS rules.