css · level 1 · unit 2 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
The browser skips what it cannot read, without a word.
When CSS has a mistake, the browser does not stop or show an error. It skips the part it cannot understand and carries on with the rest. CSS it cannot understand is called .
The most common cause is a , a small slip in the spelling. Write colour and the browser has no idea what you mean, because CSS only knows color.
So when nothing changes, play detective. Check each property and value letter by letter, and check that every hex code starts with #.
<h1>Garden party</h1>
<p>Bring a hat.</p> h1 {
colour: green;
background-color: pink;
} Press show my page to see it here.
Run it: the background turns pink, but the words stay black because colour is skipped.
guess first
One value is invalid. What will you see?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p>Fresh lemonade</p> p {
color: white;
background-color: navvy;
}
your turn
Your turn. Spell the properties exactly.
Make the sale sign white on red. Fill in the two property names, spelt the way CSS spells them, then press run.
the page you’re styling
<p>Sale today only</p>your css
Press show my page to see it here.
- the words are whitenot checked yet
- the sign is red behind the wordsnot checked yet
fix it
The gold background is missing. Can you fix it?
the page you’re styling
<h1>Prize draw</h1>your css
Press show my page to see it here.
- the heading has a gold backgroundnot checked yet
- the words are navynot checked yet
- The words turned navy, so the first declaration works. Look closely at the second value.
- Every hex code needs a special mark at the very start.
- Put
#in front offfd700, then press run.
nailed it
you can spot the silent slips now. :D
- The browser skips invalid CSS and carries on with the rest.
- There is no error message, so check spelling letter by letter.
- CSS spells it
color, and hex codes need a#.
new words in your collection
- invalid
- typo
This lesson isn’t saved. A free account remembers every lesson you finish.