How do I learn what changes my css values?

Question

I am a newbie (very much so), so my question might be dumb, but I couldn't find the answer.

For a contact table on a webpage I have set the height of 30px, but when I look at it in Google Developer tools, the height value is crossed out. I've tried to find out what causes my value to be overriden, but no luck. The developer tools shows that the value is overriden, but it doesn't show where.

So, the question is: How do I find what overrides my values in CSS?

Answer 1

In Chrome, your styles will inherit from any parent styles - either in the same style sheet or, if you have any, in other attached style sheets.

When a style inherits attributes either from parent elements or other classes, its predecessors will be listed in the Style Browser*, listed from nearest styles to most distant. So for example, if you have a paragraph that has a class assigned to it, but that paragraph is contained within a parent div that also has its own styles, your Style Browser will show the class name of that paragraph at the top (including all the class attributes), followed by the div's classes and so on up your DOM.

To discover which style is overriding your height value, scroll down through the Style Browser until you find a height attribute that isn't crossed out. You will also see the style sheet (including the line number) that contains the style that is affecting your page's appearance.

*You can open the style browser by right-clicking within a web page and selecting "Inspect Element".

Answer 2

You have to read the styles from the bottom going up.

You should find your CSS rule for the table in the styles section. Going up from that point you should be able to see which are the modifications that override your rule and display the element as depicted in the "Computed style" section.

If you dont find anything please give a look to your inline styles.

It would be easier to explain if I can look at some sample code...