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.
Asked
Active
Viewed 107 times
-2
-
2Please show us your CSS. – Robert Columbia Jul 25 '16 at 16:39
-
@Robert Columbia It is just two linked css files and it would take too many lines to view them – MaryBaker Jul 25 '16 at 16:42
-
You question has been answered here http://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override – Ram Segev Jul 25 '16 at 16:47
2 Answers
0
You should be avoiding !important wherever you can. It's bad practice. Use better class names for targeting elements. You should do some reading on CSS specificity as well as good class-naming conventions like SMACSS or BEM.
i7nvd
- 1,318
- 2
- 10
- 24
0
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.
Added:
You will do yourself a massive favour by acquainting yourself with the DOM Inspector(s) for your browser(s).
My preference is Firefox and Firebug, others prefer Chrome and Chrome DevTools etc.
A DOM Inspector will be able to show you which styles are being applied to an element and the order in which they are being applied...
... so you can see which styles are being overwritten by which other (later) styles.
Rounin
- 27,134
- 9
- 83
- 108
-
1Yeah, that's true I guess I should have put that in mind. So now I will have to go through my files and search for the cascaded selectors or there is another method ? – MaryBaker Jul 25 '16 at 17:38
-
You will do yourself a massive favour by acquainting yourself with the DOM Inspector(s) for your browser(s). My preference is Firefox and Firebug, others prefer Chrome and Chrome DevTools etc. A DOM Inspector will be able to show you which styles are being applied to an element and the order in which they are being applied... so you can see which styles are being overwritten by which other (later) styles. – Rounin Jul 25 '16 at 18:11