Frontend is a free bonus on CodeMentor AI — the main product is Python. Register to save your progress and unlock all 299 Frontend lessons + 1,100+ Python lessons.Sign up — free
TaskSet body color to #111 and font-family to 'system-ui, sans-serif'. The h1 inside .panel should INHERIT both from body (no explicit color/font-family on h1). Add a .panel rule that just sets padding 20px.
Inheritance: which properties trickle down
75 XP7 minFREE
Theory
Some properties cascade from parent → child
Set color: red on <body> and every child element inherits it — <p>, <h1>, <span>, all red unless explicitly overridden.
body {
font-family: system-ui;
font-size: 16px;
color: #111;
line-height: 1.6;
}All four of those inherit. Every descendant element will compute these unless something more specific overrides.
What inherits (common ones)
color,font-family,font-size,font-weight,line-heighttext-align,text-decoration,text-indentletter-spacing,word-spacing,white-spacecursor,visibility,direction
What does NOT inherit
margin,padding,border,width,heightbackground(background DOES NOT inherit — a child has transparent background by default and the PARENT's background just shows through)display,position,flex,gridbox-shadow,opacity,transform
Force inheritance with inherit
/* Make an anchor inherit color instead of staying blue */
a { color: inherit; }You can force ANY property to inherit even if it doesn't by default.
Reset values: initial / unset / revert
initial— reset to CSS spec default (color: initial→ black).unset— inherit if inheritable, else initial.revert— go back to the user-agent default (browser's default for that element).
revert is the most useful — handy when you want to undo your reset on one element.
Live preview