CSSbeginnerabout 40 minutes

CSS layout with flexbox and grid

Style a page, lay out a row of cards with flexbox, build a grid, and make it all work on a phone.

By the end you can

Easier if you did first

0 of 4 done

step 1 of 4

Selecting and styling

CSS is a list of rules. Each rule picks elements with a selector, then sets properties on them.

Style the card: give it a background, padding so the text is not jammed against the edge, and rounded corners.

Padding is space inside the box, margin is space outside it. Mixing those two up is the single most common CSS confusion.

.card {
  background: #eef2ff;
  padding: 20px;
  border-radius: 12px;
}

What we check

index.htmlhtml

styles.csscss

preview