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;
}