css · level 1 · unit 2 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A missing ; or } can break more than one line.
A mistake in code that makes it do the wrong thing is called a . Two sneaky bugs in CSS are a missing semicolon and a missing curly bracket.
Leave out a ; and the browser reads that line and the next as one long, muddled value. It cannot understand that, so both declarations are skipped.
Leave out a } and the next rule gets trapped inside the one above, so it stops working too. When something breaks, look at the line above the first thing that broke.
<h1>Bake sale</h1>
<p>Cakes from 50p.</p>h1 {
color: navy
background-color: gold;
}Press show my page to see it here.
Run it: the heading stays black on white, because both declarations are skipped.
guess first
A curly bracket is missing. What happens?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1>Bake sale</h1>
<p>Cakes from 50p.</p>h1 {
color: purple;
p {
color: green;
}your turn
Your turn. Finish every line.
Pick a colour for the words and one for the background. Then end each declaration with a semicolon, because the starter has none.
the page you’re styling
<h1>Pancake day</h1>your css
Press show my page to see it here.
- the words are a new colournot checked yet
- the heading has a background colournot checked yet
fix it
The sentence will not turn crimson. Fix the bug!
the page you’re styling
<h1>Red alert</h1>
<p>The biscuit tin is empty.</p>your css
Press show my page to see it here.
- the heading sits on crimsonnot checked yet
- the sentence is crimsonnot checked yet
- The heading works but the sentence does not. Look at the line above the
prule. - Every rule needs a closing curly bracket before the next rule starts.
- Add
}on its own line afterbackground-color: crimson;, then press run.
nailed it
you squashed your first bugs. :D
- A missing
;breaks that line and the next one. - A missing
}traps the next rule inside the one above. - Look at the line above the first thing that broke.
new words in your collection
- bug
This lesson isn’t saved. A free account remembers every lesson you finish.