To see the declaration in the Styles pane, hover over the expanded property and click the arrow button. Click the expand icon next to them to see their source.

The Computed pane lists the properties declared in any stylesheet in regular font, both element's own and inherited. The Computed pane also displays various properties differently.

Computed values, for example, font-size: 14px instead of font-size: 70%.

Longhand properties (precise), not shorthand (concise).

On the other hand, the Elements > Computed pane lists resolved CSS values that Chrome uses to render an element: The Elements > Styles pane displays the exact set of CSS rules as they are written in various stylesheets. To get a hint at what goes wrong, open the Computed pane to see the 'final' CSS applied to an element and compare to that you declared. # Inspect an element that still isn't styled the way you think This updates the corresponding property under svg in the Styles pane. In this example, the height='48' attribute on an element is set to 50. You can edit them in the DOM tree and this updates the CSS in the Styles pane, but not the other way around. Style-related HTML attributes on the element, for example, height, width, color, etc.

User agent stylesheet-Chrome's default stylesheet. For example, the CSS from the following sources can't be edited: The Styles pane displays properties that can't be edited in italic text. In this example, two of four shortened properties are actually overridden. The Styles pane displays shorthand properties as drop-down lists that contain all the properties that are shortened. However, due to the short nature of such properties, you may miss a longhand (precise) property that overrides a property implied by the shorthand. Shorthand (concise) properties let you set multiple CSS properties at once and can make your stylesheet more readable.

Overriding default inheritance doesn't affect the way the Styles pane displays the properties: pale or not.Non-inherited properties don't have icons and are in the corresponding sections. The pale non-inherited properties differ from pale inactive properties.These pale properties are inactive because of CSS logic, not the Cascading order. The Styles pane displays in pale text and puts information icons next to properties that are valid but have no effect because of other properties. In this example, the width: 300px style attribute on the element overrides width: 100% on the. The Styles pane crosses out properties that are overridden by other properties according to the Cascading order. Just the value when the CSS property is valid but the value is invalid.An entire CSS declaration (property and value) when the CSS property is invalid or unknown.The Styles pane crosses out and displays warning icons next to the following: The Styles pane recognizes many kinds of CSS issues and highlights them in different ways. Sometimes, you'll see your new CSS in the Elements > Styles pane but your new CSS is in pale text, non-editable, crossed out, or has a warning or hint icon next to it. The first thing to do is inspect the element and make sure that your new CSS is actually applied to the element. When you refresh the page, the element looks the same as before. Suppose that you added some CSS to an element and want to make sure the new styles are applied properly.

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

Html inspector chrome