CSS Ordering and Multiple Classes

I've recently needed to assign more than one CSS class to an html element. I didn't know this was possible until I tried it (I know a lot about CSS, just not everything).

You assign more than one class to an element by adding each class separated by a space to the class attribute of the element:

This works in both FF 2 and IE 6 & 7. I'm quite sure it works with everything else (someone can prove me wrong if they wish).

Afterwards, I wondered which CSS class will take precedence when more than one class assigns a different value to the same CSS property. So, I setup some CSS styles as follows:

And setup a html element:

The browser output looks like this:

If I rearrange the classes to:

The output is the same:

Hmmm, nothing changed. So, I played with it for a minute or two and found that the display will change when the order of the classes is changed in the CSS itself; not the class attribute of the html element! So, if I change the CSS to:

The output changes to:

It seems the last class rendered by the browser takes precedence over previous classes.

Interesting. I guess I could have looked this up in the W3C specs. But I'm too lazy, this was much more fun, and I don't have time to run through their docs.