How do I learn what changes my css values?


Tags: html,css,google-chrome

Problem :

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?



Solution :

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".

Chrome Inspector Screenshot


    CSS Howto..

    How to set this CSS arrow transparent?

    How to use scaleable pixels in css

    How to make the underlines the same size in all browsers with css?

    CSS: How to align text to baseline of height-adjusted input element?

    CSS: How to have only 100% with fluid layout and border?

    How to change css for span in span?

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    How to create and apply CSS to javascript Alert

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    How to get this partially diagonal shape from an image in CSS

    How to place something in a triangle-shaped box?

    How do I get my Bootstrap webpage to have a full width

    how to position a div below an absolute div in css

    How to detect CSS translate3d without the webkit context?

    How to render email template in a page?

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    How do I gather a class' css attributes given nothing but the className?

    How to rotate a picture using css and javascript

    How can I avoid div from executing new line if one line is already full?

    How to adjust the top of an image and an input in the same line?

    How to represent a Grid with vertical header text in HTML?

    How to make a HTML NavBar [closed]

    How to fix clickable background with Wordpress theme and CSS

    Why do small spaces keep showing up in my web pages?

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    CSS: How to prevent div from overlapping parent height or parent border

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    How to make text with certain id show up after hovering over a certain image

    How to overlay image with color in CSS?