0Pricing
CSS Academy · Lesson

Syntax and Common Breakpoints

Learn media query syntax and the standard breakpoints used in modern web design.

Media Query Syntax

A media query wraps CSS rules and applies them only when a condition is true. The basic syntax:

@media media-type and (media-feature) {
  /* CSS rules here */
}

Media Types

The most common media types:

  • all — applies to all output devices (default)
  • screen — computer and phone screens
  • print — for print preview and printing
  • speech — screen readers
@media screen and (min-width: 768px) {
  .layout { display: grid; }
}

All lessons in this course

  1. Syntax and Common Breakpoints
  2. Width Height and Orientation Queries
  3. Prefers-Color-Scheme and Prefers-Reduced-Motion
  4. Combining Multiple Media Queries
← Back to CSS Academy