What does it mean when a CSS rule is grayed out in Chrome's element inspector?

Question

I\'m inspecting an h2 element on a web page using Google Chrome\'s element inspector and some of the CSS rules--which appear to be applied--are grayed out. It

Answer 1

It means that the rule has been inherited, but is not applicable to the selected element:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.

Live example: inspect the element containing the text "Hello, world!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

Hello, world!