Add CSS to a page
Inspect CSS with DevTools
Use the Elements, Styles, and Computed panels to see matched rules, overridden declarations, inherited values, and final styles.
8 minute lesson
Open developer tools and select an element in the page.
The Styles panel shows rules that match it. A crossed-out declaration lost to another rule or is inactive. The panel usually shows the stylesheet and line where each rule came from.
The Computed panel shows the final value of every property after the cascade, inheritance, and defaults have been resolved.
Try editing a value, disabling a declaration, and adding a new property. These edits are temporary. Reloading the page restores the source files, so copy useful changes back into your stylesheet.
DevTools is not only for fixing bugs. Use it while learning to ask: which rule matched, why did this value win, and what box did the browser calculate?
Lesson completed