css · level 1 · unit 4 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Style body once and everything inside takes after it.
<body> is the element that holds everything you can see. The browser adds one round every page in this course, even when you cannot see its tags.
Many text styles : an element takes them from its , the element it sits inside. Set font-family or color on body and every heading and paragraph follows. An element's own rule beats what it inherits.
To give several tags the same style, list them with commas: h1, h2. That is a . One rule, many targets.
<h1>Pond life</h1>
<h2>Frogs</h2>
<p>Frogs can jump twenty times their own length.</p> body {
font-family: Verdana, sans-serif;
color: darkgreen;
}
h1, h2 {
color: navy;
} Press show my page to see it here.
<h2> is a smaller heading, one step down from <h1>.
guess first
The body is purple. What about the heading?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1>Packing list</h1>
<ul>
<li>Sun cream</li>
<li>Swimsuit</li>
</ul> body {
color: purple;
}
h1 {
color: black;
}
your turn
Your turn. Style the whole page in one go.
Fill in the selector so the font and the colour reach everything on the page at once.
the page you’re styling
<h1>Camping trip</h1>
<p>Remember to pack:</p>
<ul>
<li>A tent</li>
<li>Marshmallows</li>
</ul>your css
Press show my page to see it here.
- the heading is dark greynot checked yet
- the list uses Georgianot checked yet
- the paragraph is dark greynot checked yet
fix it
Neither heading turned teal. Can you fix it?
the page you’re styling
<h1>Football club</h1>
<h2>Next match</h2>
<p>Saturday at ten.</p>your css
Press show my page to see it here.
- the big heading is tealnot checked yet
- the smaller heading is tealnot checked yet
- Neither heading changed. Look closely at the selector.
- To list several tags in one selector, something must sit between them.
- Put a comma between them,
h1, h2, then press run.
nailed it
you styled the whole page at once. :D
bodyholds everything you can see on the page.- Elements inherit text styles from their parent.
- Commas let one rule style several tags:
h1, h2.
new words in your collection
- parent
- inherit
- selector list
This lesson isn’t saved. A free account remembers every lesson you finish.