Kill CSS

Hey all,

Just wondering if i can do something, and if its not possible, how else could I achieve this?

I am including a header into a page. The header is shared with other pages.

The headers css is conflicting with the rest of the page of which that pages css can sometimes vary.

To get to the point, how can i kill of the current css, and tell the rest of the page to use the new css?

I hope this makes sense and thanks for your help

Regards,

Paul

 

Are you using IDs and Classes? If so are you using them correctly? That is the best way to fix a problem like this I would guess, otherwise you could use the !important feature, but I don't suggest using it if you could just change your IDs or Classes to solve your problem. If you give some code it would make things easier.

Anyway, to use the !important feature, just go into the css and fine whatever is inheriting the css from the header and put "!important" after it.
Example:

hope that helps

 

If you are having a problem like this there is a problem with your code. Fix your code instead of trying to find a workaround.

 

You can overwrite CSS rules simply by placing new definitions closer. For example, if you call Style1.css and then Style2.css, the rules in your second stylesheet will overwrite the rules in the first as long as you define them.

For example, in Style1.css you had h1 { color: red } and in Style2.css you have h1 { color: blue}, then the blue color would prevail.

 

Give the header an ID (<div id='header'>.....</div>), then make sure all your header CSS rules start with #header.

h1 { color: #333; }

Code (markup):

Becomes:

#header h1 { color: #333; }

Code (markup):