Does the order of properties in CSS matter?

[demon_jr]

Hi everyone,

When I try the following CSS I get an effect where there is a colored bar accross the width of the screen, when the element contains text:

.top {
font-size: medium;
position: absolute;
top: 20px;
left: 0px;
padding: 3px;
background-color: #336699;
color: white;
width: 100%

}

However, in this version of the same CSS, the colored bar only goes as far as the length of the text and the style is not applied:

.top {
position: absolute;
top: 20px;
left: 0px;
padding: 3px;
background-color: #336699;
color: white;
width: 100%
font-size: medium;

}

The above is true for both IE6 and Mozilla 1.3a (most recent build).

The only difference between the 2 style sheets are the placement of the "font-size: medium" line.

Can anyone help me out with this?

Thanks!

[HTML]

In short yes, it does make a difference.

Dean or another could probably give you better info.

Dave

[QuietDean]

width: 100%

your missing an ; sign. The reason the placement makes a difference is that this line 'breaks' itself and the one below it, too.

So add the missing sign and it should work fine.

[Doorknob]

the order doesn't matter, order of execution only comes into play if say you have css code in the head of your document, as well as a css file included. the css in your head tags would have precedence then.

[HTML]

"the order doesn't matter,"

Wrong, try putting your a:hover before a:link and see if it works

[Android]

Originally posted by Dave
"the order doesn't matter,"

Wrong, try putting your a:hover before a:link and see if it works

I might be fussy, but a:hover and a:link are selectors; the original question was about properties.

[HTML]

Good call

[Doorknob]

*sticks tongue out*