CSS - Errors & DevTools
Overview
Quick links: Exercises • Checks • Print as PDF
Estimated time: 10 minutes
Spot common CSS mistakes quickly and use DevTools effectively to diagnose cascade and specificity issues.
Learning Objectives
- Identify common syntax and cascade errors.
- Use DevTools to see applied/overridden rules and their specificity.
Details & Examples
Common Errors
- Missing semicolons in declarations.
- Typos in property names or values (e.g.,
backgroud). - Unexpected specificity (a more specific rule overrides your change).
DevTools Workflow
- Inspect the element and view the Styles panel.
- Check which rule is applied/overridden and why.
- Toggle properties on/off, edit in place, and copy working rules back to your stylesheet.
Use DevTools to see that the ID rule wins.
Checks for Understanding
- Where do you look to see which rule is overriding another in DevTools?
Show answers
- The Styles panel shows applied and crossed-out rules with their sources.
Exercises
- Use DevTools to identify a rule being overridden and explain why.
- Fix a missing semicolon issue and verify the corrected rule takes effect.
Suggested answers
- Look at the Styles panel; crossed-out rules show which selector lost; check specificity and source order.
- Add the missing
;and watch the cascade update live in DevTools.