Cascading Styles

In the last tutorial we looked at a situation where two different styles could potentially be defined for the same element on your page and determined that the last one specified was the one that would be applied.

In fact there are lots more situations where you might have multiple style definitions all applying to the same tag. Let's consider the places where we could have styles defined.

In the second and third instances we could also have a style for the class, one for the tag, one for the class specific to that tag, one for that tag when it occurs within another tag, and so on.

Obviously there are potentially a number of different style definitions that may apply to a given element within your page. Also obvious is that the element can only use one of the various options if the entries conflict.

How this situation is resolved is quite simple. If two style definitions that might apply to the same element conflict then the one that is included in the more specific definition is the one that is applied. The more general style definition is overridden when a more specific style definition exists.

That covers most situations but what happens if we manage to get two definitions that are equally specific to this element but which conflict? Well this is exactly the same situation as we looked at with two classes defined on the same element. Where neither of the two definitions is more specific than the other then the one supplied closer to the element itself overrides the earlier one. The closer of two equally specific definitions takes precedence.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow