Chapter 3 — Spacing, Colour, and Borders

Give the earlier semantic structures visual hierarchy using a deliberately small CSS vocabulary.

New concepts

Common CSS selectors, margin, padding, font sizing, weight, dimensions, backgrounds, display, borders, rounded corners, text colour, and lists.

Read the Phase 2 gauge

What changed?

The content remains meaningful without CSS, making it easier to see exactly what basic presentation adds. Child dimensions are calculated manually because border-box is not available yet.

Lessons

  1. 1. Common CSS selectors
  2. 2. Styled login
  3. 3. Styled profile
  4. 4. Product cards
  5. 5. Styled survey
  6. 6. Styled gallery
  7. 7. Styled settings

Checkpoint

Restyle a semantic page using only the Phase 2 properties. Explain the difference between margin and padding.