MaryBaker MaryBaker - 4 months ago 25
HTML Question

CSS conflict issues

I have two separate files of CSS each styles a certain part of the page. to be specific one that I made for the Master content like ( header, footer, etc)and the other is for the main content that might be dynamic. I just linked the two CSS files to the page, but appears that the style of the " main content " is riding over the style of the " Master content". How to solve this problem ? or how to restrict the second css files to be only target the styling of a certain HTML part that I can define ?
I already tried the !important css property.

Answer

I just linked the two CSS files to the page, but appears that the style of the " main content " is riding over the style of the " Master content".

That's because you established some styles when you loaded the Master Content stylesheet, and then you loaded the Main Content stylesheet... which then overwrote some of the styles you'd already declared.

This is the cascade. This is what is supposed to happen.

E.g.

If you have in your Master Content Stylesheet:

header h1 {
color: blue;
}

and then, afterwards, in your Main Content Stylesheet you have:

h1 {
color: red;
}

Your <h1> (in the <header>) will be red.