CodePath - HTML & CSS Learning Platform

Media Queries

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.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Try it yourself:

HTML

<h1>Hello CSS!</h1>\n<div class='box'>Style me!</div>

CSS

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Result