What flows down and what doesn't
Add button { font: inherit; color: inherit; } to the CSS and run again: the last two lines turn true.
Some properties, mostly about text such as color and font, pass from a parent element to its children automatically; the rest do not. The keywords inherit, initial, unset and revert let you control this on purpose.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Set the whole page's text to dark gray #333, the font to Georgia, serif and the line-height to 1.6 with a single rule, and make buttons use the same font and colour.
A navigation bar has a dark background and white text: .nav { background: #222; color: white; }. Its links are still blue. Fix it so the links are white, without writing white twice.
Explain it without notes
What is inheritance in CSS, and when does it apply?
Give five inherited and five non-inherited properties, and explain why border is not inherited.
Explain the difference between inherit, initial, unset and revert using display on a div.
Why is line-height: 1.5 recommended over line-height: 150%?
Preview
Console
Nothing logged yet.Expected console output
Paragraph colour is navy? true
Paragraph font: Georgia, serif
Paragraph border width: 0px
Button uses the box font? false
Button colour is navy? false