Link Declaration Order

[MrDoubtFire]

Hi,

Is there any particular way the html (or xhtml in this case) document's HEAD is parsed? For example, if I have a declaration of something in an external css file called "doc1.css" and then later on I alter something with the same declaration but it's in "doc2.css", which one takes precedence? I ask because I read somewhere that it's parsed from the bottom upwards.

For that matter, if I write something later on in the HEAD in an inline style:

<style type="text/css">
<!--
.foo { text-align:left; }
-->
</style>

: does the above trump all if the other (same) declarations in the external stylesheets are the same (but obviously with text-align set to something else)?

Hope someone can clarify here, thanks!

MrDoubtFire

[dauvm]

To the best of my knowledge, styles run from top to bottom as they are read by the parser, cascading in the order of external, then internal, then inline. So the first style sheet is used as the base one, and then all changes after that effect only the elements that are different from the first style sheet, but it doesn't "replace" one style sheet with another, it 'cascades' them. So in your example where doc1.css comes first and then doc2.css is called later, you still have all styles from doc1.css, except for the elements added or changed in doc2.css

-Doug

[Roy Sinclair]

The definitive reference is at http://www.w3.org/TR/CSS2/cascade.html#cascade

It's rather geekish but you should be able to sort it all out.

[MrDoubtFire]

Thanks for the helpful replies gents, very useful :)

MrDoubtFire

[BrainJar]

Style rules don't necessarily cancel out entirely, only the individual properties. If you have these two rules:

.myClass {
font-size: 10pt;
color: red;
}

...

.myClass {
color: blue;
}

only the color is in conflict. The font size for elements with that class will be 10 pt because both rules are still in effect. But the second one will override the color property of the first.