Shorthand resets and relative weights
font came after line-height and silently set it back to normal. bolder steps up from the parent's weight: 400 → 700 → 900.
font-size, font-weight, font-style and line-height set how big, how thick, how slanted and how spaced text is; a unitless line height and a line length of about 45–75 characters make text comfortable to read.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Style an article: base text 1.125rem with line height 1.6, headings at line height 1.2, and lines no longer than 70 characters.
Rewrite these four declarations as one font shorthand: font-style: italic; font-weight: 600; font-size: 1.25rem; line-height: 1.4; with the family Georgia, serif.
A <small> inside a paragraph has font-size: 0.8em and the paragraph is 20px. How big is the small text? What if it were 0.8rem?
Explain it without notes
Why is a unitless line-height safer than 1.5em or 150%?
What does the font shorthand require, and what is the danger of using it?
What do bolder and lighter do, and why might font-weight: 600 look the same as 700?
What is a readable measure, and how do you set it in CSS?
Preview
Console
Nothing logged yet.Expected console output
.a line-height: normal
outer b: 700
inner b: 900