This guide assumes that you're familiar with inspecting CSS in Chrome DevTools. SeeView and change CSS to learn the basics.

Inspect the CSS you author

Suppose that you added some CSS to an element and want to make sure the new styles areapplied properly. When you refresh the page, the element looks the same as before. Something is wrong.

The first thing to do isinspect the element and make sure that your new CSS is actually applied to the element.

Sometimes, you'll see your new CSS in theElements >Styles pane but your new CSS is inpale text, non-editable, crossed out, or has a warning or hint icon next to it.

Understand CSS in the Styles pane

TheStyles pane recognizes many kinds of CSS issues and highlights them in different ways.

Matched and unmatched selectors

TheStyles pane shows matched selectors in regular text and unmatched ones inpale text.

Invalid values and declarations

TheStyles pane crosses out and displays warning icons next to the following:

• An entire CSS declaration (property and value) when the CSS property is invalid or unknown.
• Just the value when the CSS property is valid but the value is invalid.

Overridden

TheStyles pane crosses out properties that are overridden by other properties according to theCascading order.

In this example, thewidth: 300px; style attribute on the element overrideswidth: 100% on the.youtube class.

Inactive

TheStyles pane displays inpale text and puts information icons next to properties that are valid but have no effect because of other properties.

These pale properties are inactive because of CSS logic, not theCascading order.

Key point:The pale inactive properties differ from palenon-inherited properties. Inactive properties have icons.Hover over the icon to get a hint at what went wrong.

In this example, thedisplay: block; property disablesjustify-content andalign-items that control flex or grid layouts.

Inherited and non-inherited

TheStyles pane lists properties inInherited from <element-name> sections depending on theirdefault inheritance:

• Inherited by default are in regular text.
• Non-inherited by default are inpale text.

Key point:

• The pale non-inherited properties differ from paleinactive properties. Non-inherited properties don't have icons and are in the corresponding sections.
• Overriding default inheritancedoesn't affect the way theStyles pane displays the properties: pale or not.

Shorthand

Shorthand (concise) properties let you set multiple CSS properties at once and can make your stylesheet more readable. However, due to the short nature of such properties, you may miss a longhand (precise) property that overrides a property implied by the shorthand.

TheStyles pane displays shorthand properties as drop-down lists that contain all the properties that are shortened.

In this example, two of four shortened properties are actually overridden.

Non-editable

TheStyles pane displays properties that can't be edited initalic text. For example, the CSS from the following sources can't be edited:

• user agent stylesheet—Chrome's default stylesheet.

  

• Style-related HTML attributes on the element, for example, height, width, color, etc. You can edit them in the DOM tree and this updates the CSS in theStyles pane, but not the other way around.

  In this example, theheight="48" attribute on an<svg> element is set to50. This updates the corresponding property undersvg[Attributes Style] in theStyles pane.

Inspect an element that still isn't styled the way you think

To try to find what goes wrong, you may want to check:

• CSS documentation andselector specificity in the tooltips in theStyles pane.
• TheComputed pane to see the "final"CSS applied to an element and compare to that you declared.

TheElements >Styles pane displays the exact set of CSS rules as they are written in various stylesheets. On the other hand, theElements >Computed pane lists resolved CSS values that Chrome uses to render an element:

• CSS derived frominheritance
• Cascade winners
• Longhand properties (precise), not shorthand (concise)
• Computed values, for example,font-size: 14px instead offont-size: 70%

Understand CSS in the Computed pane

TheComputed pane also displays various properties differently.

Declared and inherited

TheComputed pane lists the properties declared in any stylesheet in regular font, both element's own and inherited. Click the expand icon next to them to see their source.

To see the declaration in theStyles pane, hover over the expanded property and click the arrow button.

To see the declaration in theSources pane, click the link to the source file.

For properties with multiple sources, theComputed pane shows theCascade winner first.

Runtime

TheComputed pane lists property values calculated at runtime inpale text.

In this example, Chrome calculated the following for the<ul> element:

• Thewidth relative its parent,<div>
• Theheight relative to its children, the two<li> elements

Non-inherited and custom

To make theComputed pane showall properties and their values, checkShow all. All properties include:

• Initial values for non-inherited properties inpale text.
• Custom properties—with a-- prefix in regular text. Such properties are inherited by default.

Key point:Overriding default inheritancedoesn't affect the way theComputed pane displays the properties: pale or not.

To break this big list into categories, checkGroup.

This example shows the initial values for non-inherited properties underAnimation and custom properties underCSS Variables.

Search for duplicates

To investigate a specific property and its potential duplicates, type that property name in theFilter textbox. You can do this both in theStyles andComputed panes.

SeeSearch and filter an element's CSS.

Find unused CSS

SeeCoverage: Find unused JavaScript and CSS.