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 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.