css · level 1 · unit 1 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A says what to style and how.
CSS is made of rules. A rule starts with a , which picks the elements to style. Here h1 picks every <h1>. Then come curly brackets, { and }, which hold the instructions.
Each instruction is a and a . The property is what to change, like color for the colour of the text. The value is what to change it to, like gold.
A colon goes between them and a semicolon ends the line. CSS uses American spelling, so it is always color, never colour.
<h1>Gold medal</h1>
<p>Well done, Sam!</p>h1 {
color: gold;
}Press show my page to see it here.
Read it as: for every h1, set the colour of the text to gold.
guess first
Two rules this time. What will you see?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1>Space facts</h1>
<p>The Sun is a star.</p>h1 {
color: navy;
}
p {
color: orange;
}your turn
Your turn. Write a whole rule.
Fill in the selector, the property and the value so the paragraph turns your favourite colour. Try hotpink, teal or orange.
the page you’re styling
<h1>About me</h1>
<p>I like rainy days and hot chocolate.</p>your css
Press show my page to see it here.
- the paragraph is not blacknot checked yet
- the heading stays blacknot checked yet
fix it
The warning will not turn red. Can you fix it?
the page you’re styling
<h1>Careful!</h1>
<p>The floor is wet.</p>your css
Press show my page to see it here.
- the warning is tomato rednot checked yet
- Compare it with the rule in the lesson. Something small is missing between
colorandtomato. - A property and its value need a colon between them.
- Write
color: tomato;with a colon aftercolor, then press run.
nailed it
you wrote your very first rule. :D
- A selector picks which elements a rule styles.
- The property says what to change. The value says what to.
- A colon goes in the middle and a semicolon at the end.
new words in your collection
- rule
- selector
- property
- value
This lesson isn’t saved. A free account remembers every lesson you finish.