Objectives and outcomes

In this tutorial we are to learn about media queries in CSS3.

What is a Media Query?

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example

Put this code in your custom CSS file

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
If the browser window is smaller than 500px, the background color will change to lightblue.