![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

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.

[Video](https://www.youtube.com/watch?v=iuZx0kHS0Xs)

Watch the video to learn how the **Elements** \> **Styles** pane highlights various CSS issues:

- ![Warning.](https://developer.chrome.com/static/blog/devtools-tips-20/image/warning-66b9aa6b14b91.png) Property with invalid syntax

- ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-b614278753976.svg) Overridden property

- ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-68d3367263112.svg) Inactive property ![Information.](https://developer.chrome.com/static/blog/devtools-tips-20/image/information-40e2cd8955b43.svg)![With a hint.](https://developer.chrome.com/static/blog/devtools-tips-20/image/with-hint-bfb6e0b7bff3f.png)

- Inherited from `parent`

  - ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-1d9a701fdbd51.svg) Inherited property
  - ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-42ee4857bc2ff.svg) Non-inherited property
- ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-ba0480828e04e.svg) Expandable shorthand property ![Expand.](https://developer.chrome.com/static/blog/devtools-tips-20/image/expand-dec2e12a01503.png)

  - ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-4638480421082.svg) Overridden longhand property
  - ![Checkbox.](https://developer.chrome.com/static/blog/devtools-tips-20/image/checkbox-96cb4314de00f.svg) 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](https://developer.mozilla.org/docs/Web/CSS/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](https://developer.chrome.com/docs/devtools/css/issues.md.txt).

To level up your CSS expertise, see [Learn CSS](https://web.dev/learn/css).

To learn how to create websites that look great and work well for everyone, see [Learn Responsive Design](https://web.dev/learn/design).