Practice

CSS exercises

Make a change, predict what it will do, and compare the result.

1
CSS Selectors
Choose elements and apply styles.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
CSS
```
.card {
  max-width: 40rem;
  padding: 1.5rem;
  border: 1px solid #ddd;
}
```
2
CSS Box Model
Understand content, padding, border, and margin.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
CSS
```
.box {
  box-sizing: border-box;
  width: 20rem;
  padding: 1rem;
  border: 2px solid #333;
  margin: 1rem auto;
}
```
3
CSS Flexbox
Lay out items in a row with spacing and alignment.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
CSS
```
.row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
```
4
CSS Variables and Media Queries
Reuse values and adapt the layout to narrow screens.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
CSS
```
:root {
  --accent: #0b5fff;
}

.button {
  background: var(--accent);
  color: white;
}

@media (max-width: 40rem) {
  .button {
    width: 100%;
  }
}
```
5
CSS Specificity and the Cascade
Predict which rule wins when several rules match the same element.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
CSS
```
p { color: black; }
.note { color: blue; }
p.note { color: green; }
#intro { color: red; }
p:first-child { font-weight: bold; }
a:hover, a:focus-visible { text-decoration: underline; }
.card > h2 + p { margin-top: 0; }
```

CSS Grid Layout

Build a two-dimensional page layout with named areas and a responsive card grid.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

CSS

.layout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 1rem;
}
.layout > header { grid-area: header; }
.layout > nav { grid-area: sidebar; }
.layout > main { grid-area: main; }
.layout > footer { grid-area: footer; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}

CSS Transitions, Animations, and Reduced Motion

Animate state changes smoothly and respect users who prefer less motion.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

CSS

.button {
  background: #0b5fff;
  transition: background-color 200ms ease, transform 200ms ease;
}
.button:hover {
  background: #0846c4;
  transform: translateY(-2px);
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}
.loading { animation: pulse 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .loading { animation: none; }
}

8
CSS Units and Fluid Typography
Choose relative units and clamp() so text scales with the user's settings and the screen.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
CSS
```
html { font-size: 100%; }
body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  max-width: 65ch;
  margin-inline: auto;
  padding: 1rem;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.icon { width: 1.5em; height: 1.5em; }
```

CSS Selectors

CSS Box Model

CSS Flexbox

CSS Variables and Media Queries

CSS Specificity and the Cascade

CSS Grid Layout

CSS Transitions, Animations, and Reduced Motion

CSS Units and Fluid Typography