I want to click / look at on an html element and find out which css rule is responsible for which format property.
i.e. I want to know the font's come from body{ } the color from h { } and the padding from #headercontainer
Is there a way of doing this?
I've tried firebug and cssedit (both of which are very cool) but can't see where you'd find out the inheritance.
It seems like such a useful thing to want to do there has to be a way!
Thanks.
use firebug. The style information will show which css rules are being applied and which are being canceled out.
When you inspect an element, the style tab shows what styles are being applied. style rules with a strikethrough are overridden styles (note: this is with "show computed styles" turned off)
I thought Firebug did this? If you inspect an element it shows the styles on the right, and all the CSS that effects that element. It even shows the formatting that has been overridden by using a strikethrough.
Firebug's inspect feature (there should be a little inspect button or flashlight under the tab) allows you to click on an element and see all of the CSS blocks that it inherits from.
Here is a youtube video which demonstrates this feature.
Here is the firebug website. You can see in the picture at the top the styling inheritance data on the right.
Yeap, for that FireBug is awesome. Firebug is a add-on for Firefox and allows you to inspect each element in currently viewing page and allows you to change them and see the results immediately.
Also Google's Chrome is able to provide you that info when you run chrome://inspector which I like a lot. Also new verison (2.x) kind of validates your code and errors are shown after clicking error icon in bottom right corner
Firebug is for advanced users, you can use x-ray if you want to click to find out http://www.westciv.com/xray/
For fonts there is a firefox add-on called font finder.
https://addons.mozilla.org/en-US/firefox/addon/4415