The browser skips what it doesn't understand
rgb(0, 0, 0) and 16px are the defaults, meaning the rule did nothing. Only .c (the earlier valid value survived) and .e (case doesn't matter) worked.
A CSS rule is a selector followed by a block of property: value; declarations in curly braces; comments use /* */, and anything the browser can't understand is skipped silently instead of stopping the stylesheet.
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.
Fix this CSS so both declarations work: h2 { color: teal font-weight: normal }.
Write one rule that gives h1, h2 and .title the colour darkslateblue, with a comment above it explaining that titles share a colour.
Write a .hero rule that uses a solid navy background as a fallback and linear-gradient(navy, teal) for browsers that support gradients.
Explain it without notes
Explain the parts of a CSS rule and the purpose of the colon and the semicolon.
What does the browser do when it finds an unknown property or an invalid value?
Why does a missing semicolon often break two declarations, not one?
How can you write CSS that uses a new feature but still works in older browsers?
Preview
Console
Nothing logged yet.Expected console output
a rgb(0, 0, 0) 16px
b rgb(0, 0, 0) 16px
c rgb(0, 0, 255) 16px
d rgb(0, 0, 0) 16px
e rgb(0, 128, 0) 16px
f rgb(0, 0, 0) 16px