DevTools Tips: Discover CSS issues
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 syntaxOverridden propertyInactive 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.