CSS order

HTML & CSS
1

Hello!

I believe that the order of CSS statements in the stylesheet matters, But I’m not sure on the specifics. I have this thing whereby I have to refresh a page before it looks like I want. Anyone know of some good references on the WWW about this?

Thank you

2

Yes, and no.
Of course, for non-conflicting rules order doesn’t matter.

.rule1{}
.somethingelse{}
#whats .isthis{}
is the same as :
#whats .isthis{}
.rule1{}
.somethingelse{}

Declarations are affected not rules.That is:

.rule { color: red; padding:10px; float:right; }
.rule { color: blue; }

.rule will be overridden to blue, but any property previously declared will remain the same.

The order of your CSS can affect how it’s interpreted, but it is secondary to specificity.

.wrap .rule{}is more specific than .rule so it will override .rule, even if it’s earlier in the source code.

Then there is specificity conflicts to consider, for example the following rules have the same specificity.
#someID .rule { color: red; padding:10px; float:right; }
#otherID .rule { color: blue; }

so this will have several behaviors:

if .rule is wrapped only in #someID, it will be red,
if .rule is wrapped only in #otherID, it will be blue,
if .rule is wrapped BOTH , it will be blue, as the first rule overrides the second ( so if you switched the order in your style sheet then the color would which for this particular markup case)

hopefully that sheds some light on the subject.

3

Thank you, very helpful!

My problem was an ID inside another ID. doing #id1 #id2 {rules for id2} sorted it