Debugging Specificity

Browser DevTools show applied vs overridden styles with strikethroughs, making it easy to see which rule wins and why.

Example

/* Chrome DevTools workflow:
   1. Inspect element → Styles panel
   2. Crossed-out rules = overridden (lower specificity or source order)
   3. Hover selector to see specificity score
   4. Look for !important indicators
   Specificity calculator: specificity.keegan.st */

/* Also useful: computed tab shows final values */

CSS

Full Editor

Pro Tip

The Computed tab in DevTools shows the final resolved value regardless of rule complexity.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned