CODEWITHSUNDEEP
css
Lyn
Lyn

Reputation: 67

How to overwrite a css style from another css file?

I need to overwrite the header style from style.css.

Here's the style that I need to overwrite.

.t_header{
    text-align: center;
    background-color: #bfd4f0;  
    color:#15428b;
    white-space:nowrap ;
    margin:0px 10px 0px 10px;
    height:1.5em;
}

Now I created another css file name black.css and I need to create a different background color for .t_header

.t_header{
    text-align: center;
    background-color: white !important; 
    color:#15428b;
    white-space:nowrap ;
    margin:0px 10px 0px 10px;
    height:1.5em;
}

I already used !important to overwrite the style from style.css but its not working but for some reason, the other style class and id that I overwrite using !important worked well. I hope someone can give me another way to overwrite the style aside using !important. Thanks

Upvotes: 3

Views: 15981

Answers (2)

OneChillDude
OneChillDude

Reputation: 8006

Using !IMPORTANT is generally not recommended. Try increasing specificity

body div.theader { background: white; }

Also keep in mind that it's generally frowned upon to use more than four selectors.

you get the idea...

Upvotes: 0

Sujit Agarwal
Sujit Agarwal

Reputation: 12518

Try to clear your browser cache, then add the files in your code in the following sequence - 

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="black.css">

The overriding css doesn't need to have all properties -

This much code will be enough - 

.t_header{
    background-color: #fff;
}

Upvotes: 3

Related Questions