Debugging and review
Debug the cascade
Trace a wrong visual value back through matched rules, specificity, inheritance, custom properties, layers, and source order.
8 minute lesson
~~~
When a value is wrong, inspect the element instead of adding a stronger rule blindly.
- Find the property in the Computed panel.
- Expand it to see which declaration supplied the value.
- Inspect crossed-out competing declarations.
- Check inherited values and custom-property definitions.
- Confirm the selector matches the element you intended.
If the rule is absent, check whether the stylesheet loaded and whether an earlier syntax error affected parsing.
Fix the cause. A duplicate selector with higher specificity may hide the symptom, but it makes the next override harder.
Lesson completed