Your site says the right things. Today you decide how it looks: its colours, its font, the size of its text.

And today is the day you stop only reading the code and start writing it.

Everything you have written so far says what things are: a heading, a paragraph, a picture. None of it says what they should look like. That is a separate job, and it has its own language: CSS.

A CSS rule has three parts worth naming, because you will use these words all lesson:

So this rule says: for the whole page, make the background pale blue.

body {
  background: lightblue;
  color: navy;
  font-family: sans-serif;
}

Before you change anything, find your page in the CSS.

1. In the builder below, click the CSS tab.
2. The very first rule, at the top, is your page. Everything below it styles buttons, pictures and lists; you did not write those and you can ignore them today.

Right now that top rule looks exactly like this, because nobody has changed anything yet:

body {
  background: white;
  color: black;
  font-family: sans-serif;
  margin: 16px;
}

Now change it, keeping one eye on that top rule.

1. Click the Blocks tab. On the blue page block, find the dropdown labelled background and pick a different colour.
2. Click back to the CSS tab. In that same top rule, the background line now holds the colour you picked.
3. Do the same with the text dropdown, then font. Each one changes its own line in that one rule.

This is the block those three dropdowns live on:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "web_page", "fields": {"NAME": "Home", "BG": "white", "FG": "black", "FONT": "sans-serif"}, "inputs": {"CONTENT": {"block": {"type": "wp_heading", "fields": {"TEXT": "My page", "ALIGN": "left"}}}}, "x": 10, "y": 10}]}}