Some CSS elements are not showing

Question

Building a new website and using the 960 grid system, with the following css: 960_24_col text rest

I'm also using my own style.css.

So, I am trying to apply the following css to my header 2 (h2)

h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}

But it doesn't seem to apply. When I inspect the element in Chrome, some of the h2 elements are crossed out (line through it) in my style.css...when I copy the above code to say text.css..its works (but also applies to the other h1, h2, h3 etc)

Any of you css wizards go any ideas?

Answer 1

CSS files are read in order. So if one file is loaded which sets style on h1 , and another file is loaded that also sets style on h1 , the second one will overrule the first.

A nasty way to fix that is to add !important to the end of your style, ie:

h2 {
    font-size: 26px;
    text-transform: lowercase;
    border-bottom: 1px solid yellow !important;
    padding-bottom: 30px;
    margin-bottom: 15px;
}

Answer 2

There must be some other style also defined for h2 in style.css the strike-through in chrome inspector means that this style has been over ridden, try finding any other occurrences for h2 in style.css

Or if you want to keep both of style definitions due to some intentional changes you made try using !important after respective property which you don't want to be over-ridden to ask browser to give top priority to this style instead of others

h2 {
font-size: 26px !important; /*same with every other property you want to give top priority*/
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}