Tutorial :Discovering which CSS rule is responsible for the format of any element



Question:

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.


Solution:1

It's right here in firebug:

firebug

The built-in tools basically offer the same feature now:

dev tools


Solution:2

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)


Solution:3

If you can tolerate IE, try IE8's developer tools - they're actually quite nice. Open the page in IE8 and press F12 to bring up the tools.

alt text http://i.msdn.microsoft.com/Dd565627.devtools_ovw_fig03(en-us,VS.85).gif


Solution:4

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.


Solution:5

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.


Solution:6

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.


Solution:7

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


Solution:8

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


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »