Sofia Emelianova
Have you ever applied CSS to an element but it just doesn't work?
With Chrome DevTools, you can discover CSS issues at a glance, debug, and test them.
Watch the video to learn how the Elements > Styles pane highlights various CSS issues:
Property with invalid syntax
Overridden property
Inactive property 
Inherited from
parent
Inherited property
Non-inherited property
Expandable shorthand property 
Overridden longhand property
Active longhand property
user agent stylesheet
- Non-editable property
Overridden non-editable property
More debugging tips:
- Use the filter in the Styles pane to focus on the one property that interests you.
- Use the Computed pane to see all the Cascade winners and their computed values.
- In the Computed pane, expand a property and click a link to find its source in the Styles pane.
To learn more about all the ways DevTools highlights CSS issues, see Find invalid, overridden, inactive, and other CSS.
To level up your CSS expertise, see Learn CSS.
To learn how to create websites that look great and work well for everyone, see Learn Responsive Design.