CSS 3 cheatsheet

CSS 3: Responsive design

7 common CSS 3 tasks.

Change styles by screen width

Apply styles when the screen is at least 768px wide. Writing mobile styles first and adding queries for larger screens keeps CSS simple.

@media (min-width: 768px) {
  .sidebar { display: block; }
}

Keep a font size between a minimum and maximum, growing with the viewport.

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

Style a component according to the space it has, not the screen.

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: flex; }
}

Follow the user's operating system setting.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --text: #eee;
  }
}

Turn off animations for people who ask for less movement.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Never overflow the container, and keep the proportions.

img {
  max-width: 100%;
  height: auto;
}

Hold a 16:9 ratio, for example for a video container.

.video {
  aspect-ratio: 16 / 9;
}