CSS: make it pretty

HTML says what things are. CSS says how they look.

CSS (Cascading Style Sheets) styles your HTML. A rule has a selector (what to style) and declarations (how to style it).

h1 {
  color: tomato;
  font-size: 3rem;
}

Every <h1> gets tomato-coloured, big text.

The box model

Every element is a box. From the inside out: content, then padding (space inside the border), then border, then margin (space outside). Most layout bugs are really box-model surprises.

Centering with flexbox

Put display: flex on a parent and its children line up in a row. Add justify-content: center and align-items: center to centre them both ways.

Quick check

Which part of the box model is the space OUTSIDE the border?

1. Padding
2. Margin
3. Content
4. Outline

Answer: Margin. Padding is inside the border, margin is outside it. Margin pushes other elements away.