Dave Johnson

I was just making some content for an Ajax video training series that Andre, Alexei and I are preparing for Prentice Hall as an extension of our book (Enterprise Ajax) and thought that I would just share this tidbit about CSS for those that have never really fully understood how it works but know enough to be dangerous.

CSS rules are applied using two approaches: inheritance and the cascade. So styles can be applied to certain elements through inheritance from styles of parent elements or by the battling of different styles based on cascade rules.

Cascade

The cascade is a bit more involved. There are three important aspects when the browser determines what styles get applied to what elements.

Origin

The first is the style origin. Styles can defined either by the web page author (Author), the person viewing the web page (User) or the application being used by the user to view the web page (UserAgent). The precedence rules for the origin are just that - Author, User, UserAgent - in order from highest precedence to lowest. Of course User specified styles can use the !important modifier on their styles to override Author styles.

Specificity

The second aspect of the cascade is specificity. The specificity is determined by how specific (go figure) the CSS selector rule is that matches a particular element. ID selectors are the most specific followed by selectors based on attribute values such as class names followed by selectors with element names in them - i.e. in order of precedence from highest to lowest we have #header {}, *.header {}, div {}. To get the specificity of a rule we count the number of ID selectors (call it “A”), the number of class or attribute selectors (call it “B”) and finally the number of tag names (call it “C”). Then we concatenate ABC and we come up with a final number like 321 and then compare all the rules for a style and highest number wins.

Order

Finally we have the style order. If we have multiple rules in the Author stylesheet for a page that all have the same specificity then the last defined style will win.

Inheritance

If the cascade does not result in a style being set, then inheritance may become important for the defining of an elements style.

Most CSS styles are not inherited. Background color, borders and the like are not inherited by default whereas line-height and fonts are. You can force a style to inherit by setting the value of the style to inherit as in background-color: inherit;. That’s really all there is to inheriting - just don’t get it mixed up with object oriented inheritance. If you feel like you want to do something along the lines of object oriented inheritance then remember that you can define multiple rules separated by commas such that those rules all use the same styles such as .header, .footer {font-face: arial;}.

For the entire story check out the official W3C site but hopefully this will help some people out there write more succinct and understandable stylesheets!

Del.icio.us

This entry was posted on Monday, January 14th, 2008 at 7:54 pm and is filed under AJAX, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.