A stack is inherited, form controls are not
The h1 never set a font, yet it reports the body's stack: inheritance. The first button keeps the browser's own control font; the second one inherits.
font-family takes a list of fonts in order of preference, called a font stack; the browser uses the first one it has and must always end with a generic family like sans-serif as the safety net.
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.
Write a font stack for headings that prefers Georgia, then Times New Roman, and always ends in a serif.
Make all code elements use a monospace stack that prefers ui-monospace, then Consolas, then Courier New, and make all buttons use the page font.
Explain it without notes
What is a font stack, and why must it end with a generic family?
Why does a single line of text sometimes show several different fonts?
When should font names be quoted in font-family, and when must they not be?
Why don't buttons and inputs use the font you set on body, and how do you fix it?
Preview
Console
Nothing logged yet.Expected console output
h1: Georgia, "Times New Roman", serif
code: ui-monospace, Consolas, monospace
fixed button: Georgia, "Times New Roman", serif