Fallbacks and feature checks
The made-up value is dropped, so the earlier navy stays. @supports applied its block because this browser understands Grid.
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
background: rgb(0, 0, 128)
radius: 12px
true
false