css · level 1 · unit 6 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
boxes stack up; boxes sit in a line.
says how a box takes up space. A block box, like <p>, <h1> or <div>, starts on a new line and stretches across the whole width.
An inline box sits inside a line of text, only as wide as its words. <span> marks a few words to style. <a> is a link, and its href says where it goes. Both are inline.
You can switch: display: block puts a link on its own line, and display: inline lines block boxes up like words. Inline boxes ignore width and height.
<p>I love <span class="hi">pancakes</span> with jam.</p>
<a href="https://example.com/recipes">Recipes</a>
<a href="https://example.com/shop">Shop</a>.hi {
background-color: yellow;
}
a {
display: block;
}Press show my page to see it here.
Delete the a rule and the two links sit side by side again.
guess first
Three paragraphs made inline. What happens?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p class="light">Red</p>
<p class="light">Amber</p>
<p class="light">Green</p>.light {
display: inline;
background-color: lightgray;
}your turn
Your turn. Stack the links.
Make each link sit on its own line by setting display to the right value.
the page you’re styling
<a href="https://example.com/home">Home</a>
<a href="https://example.com/games">Games</a>
<a href="https://example.com/help">Help</a>your css
Press show my page to see it here.
- each link sits on its own linenot checked yet
fix it
The badge ignores its width. Can you fix it?
the page you’re styling
<p>Today's reward: <span class="badge">Gold star</span></p>your css
Press show my page to see it here.
- the badge is a block boxnot checked yet
- the badge is 120px widenot checked yet
- A
<span>is an inline box. What do inline boxes do withwidth? - Inline boxes ignore
width. The badge needs to become a block. - Add
display: block;to the.badgerule, then press run.
nailed it
you know blocks from inline boxes. :D
- Block boxes start a new line and fill the width.
- Inline boxes sit in the line, as wide as their words.
displayswitches a box between block and inline.
new words in your collection
- display
- block
- inline
This lesson isn’t saved. A free account remembers every lesson you finish.