28

So far, I can only tell if a property is inherited or not, but I need to know the source of inheritance, (for ex, which CSS file caused the final value ?) is this possible ?

Is there a handy tool for this ?

EDIT

Here is what I get in chrome Computed Style (show inheritance) See the direction property, there is no info about its inheritance source enter image description here

Improve this question
5
  • You can do this by using fire bug.check my update 2. Commented Dec 28, 2012 at 7:13
  • 4
    it could also mean there is no inheritance for this property, default value is applied to it. Commented Dec 28, 2012 at 7:23
  • You are correctly using "Computed Style" and Sudarshan is probably right saying that direction has a default value in your case. Can you provide an example you are testing this on? Commented Dec 28, 2012 at 8:05
  • Its h1 tag, Yes you are right Sudarshan, it seems that its the default value which is not populated by inheritance .. what's the practical way to override direction for all the viewed page though ? Commented Dec 28, 2012 at 8:42
  • if you want to override any default property add it in element.style { } at styles panel Commented Dec 28, 2012 at 8:47

2 Answers 2

Reset to default
12

You can do this job very easily by using Firebug in Firefox or Chrome's Developer Tools.

Chrome Developer Tools

Like image shows below.

enter image description here

For more information check Chrome Developer Tools: Element Styles Here

In Firebug

Like image shows below.

enter image description here

For more information check CSS Development Here

You can install Fire Bug From Here

Update 1:

You can find it by just clicking Show Inherited check box on Chrome's computed style panel likes below.

enter image description here

Update 2:

In Firebug, you just click inherited element what I showed below image.Then It will guide you to the relevant Inherited element's location.

P.S. - Same can do by using chrome Tool.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks, although Firefox Fire Bug Tool is awesome, I couldn't find the property I am looking for listed, that is direction, but, its listed in chrome Computed Style
@SamirSabri check my update 1.Inside the chrome also you can do this.
@SamirSabri on chrome also you can do same thing just by clicking "Inherited From's Link".Same as firebug.It will direct you to relevant location.
Thanks Sampath for clarification, I found that what I see in the computed style is the default values which are not inherited ..
2

The cascading nature of CSS makes the Styles browser in the Elements Tab very useful, you can see the individual styles and where they come from, you can also see the final set of styles after it is computed and applied to the element.

enter image description here

EDIT

You can refer a property and its source from computed style panel

enter image description here

Reference

Improve this answer

3 Comments

its hard to find it this way, I need to simply search for the property name to find it and find its inheritance source, this way you've shown above will force me look through all 'Inherited from' tabs to see if my property listed or not .. sadly there is no search option, its only available for the page html source
@SamirSabri: You can relate a property and its value using computed style panel no need to do a search operation, check my edit in answer
I've got your point, so, it seems that I am viewing the default value, which is not inherited .. please see discussion above

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.