A well-formed stylesheet
The border shorthand set width, style and colour on all four sides; JavaScript reads them back as separate longhand properties.
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
h2 font: Georgia, serif
border-top-width: 2px
border-top-style: solid
border-top-color: rgb(43, 76, 126)