css · level 1 · unit 5 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
px, and % are three ways to measure.
px is a fixed size. rem means times the page's base text size, which is 16px unless someone changes it. So 1rem is 16px and 2rem is 32px.
% is a , a share out of a hundred. For font-size it is a share of the parent's size. 50% is half as big and 200% is twice as big.
Many people use rem for text. If a reader turns up the text size in their browser settings, everything measured in rem grows with it.
<h1>Recipe</h1>
<p>Mix the flour and the eggs.</p>h1 {
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}Press show my page to see it here.
2.5rem is two and a half times 16px, which makes 40px.
guess first
A percentage of the parent. How big is the item?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul>
<li>Apples</li>
</ul>ul {
font-size: 20px;
}
li {
font-size: 150%;
}your turn
Your turn. Size it with rem.
Make the heading three times the base size and the paragraph one and a half times it. Use rem both times.
the page you’re styling
<h1>Volcano facts</h1>
<p>Some volcanoes sleep for thousands of years.</p>your css
Press show my page to see it here.
- the heading is 48pxnot checked yet
- the paragraph is 24pxnot checked yet
- the sizes are in
remnot checked yet
fix it
The tip will not grow. Can you fix it?
the page you’re styling
<p>Tip: wear wellies in the rain.</p>your css
Press show my page to see it here.
- the tip is 24pxnot checked yet
- The size did not change. What is missing after the number?
- A size needs a unit, like
pxorrem. A bare number is skipped. - Change
1.5to1.5rem, then press run.
nailed it
you measured three different ways. :D
pxis fixed.1remis the base size, usually16px.%is a share of the parent's size.- Sizes need a unit:
1.5rem, not1.5.
new words in your collection
- rem
- percentage
This lesson isn’t saved. A free account remembers every lesson you finish.