clean a div of a specified css rules

Question

In a website, I have a header and footer that comes from another website.

Those header and footers came with javascript and add lots of CSS files (CSS files used from another website) ... and the main website too! Those CSS are like battle themselves and the rendreing of the header and footer are like mixed styles because of mixing CSS rules from all css files...

How Can I remove all the CSS rules (main.css) on the two part of the main website and just apply the "headerAndFooter.css" on those two parts?

The every part havs his proper div.

Thanks in advance

Answer 1

You should create a new class for your headers and footers in a separate CSS file - and enter the needed styles there. That way, they won't conflict with the rest of your site - and you won't compromise the rest of your site's layout by modifying global CSS.

Of course, without seeing any of your code, it's hard to provide a detailed answer, but in cases like this, more accurate class names are a good starting point.

Answer 2

You can use !important at the end of the value of the property you are trying to change, if you have several rules overwriting each other.

For example: the blue color would show, not the red, because you labeled the blue as important.

body {
    color:red;
}

body {
    color:blue !important;
}

A better solution would be to just erase the rules that you don't need from the different css files.

Answer 3

I finally download the incoming CSS and prefix them by #header and #footer. Than I ahave full control of all CSS because I use it locally.