CSS · At-rules, values and responsive design

@media query

Applies rules when a media condition matches: width, pointer type, colour scheme or reduced motion.

cssRunnable example css course

Syntax

@media (min-width: 40rem) { … }

Example

Try it

@media (min-width: 480px) { .demo { background: #eef6ff; } }

Write mobile-first rules with min-width so the base styles serve small screens.

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.