Dynamic HTML: The Definitive Reference

Cascade Precedence Rules

By now it should be clear that there are many ways styles can be applied to an element—from an external style sheet file, from a <STYLE> tag set, and from a STYLE attribute in a tag—and there is the possibility that multiple style rules can easily apply to the same element in a document (intentionally or not). To deal with these issues, the CSS recommendation had to devise a set of rules for resolving conflicts among overlapping rules. These rules are intended primarily for the browser (and other user agent) makers, but if you are designing complex style sheets or are seeing unexpected results in a complex document, you need to be aware of how the browser resolves these conflicts for you.

Conflict resolution is mostly a matter of assigning a relative weight to every rule that applies to a particular element. Rules with the most weight are the ones that most specifically target the element. At the lightweight end of the spectrum is the “nonrule,” or default style setting for the document, generally governed by the browser’s internal design and sometimes influenced by preference settings (e.g., the base font size for text content). Such a “nonrule” may actually apply directly only to a high-level object, such as the BODY element; only by way of inheritance does the default rule apply to some element buried within the content. At the heavyweight end of the spectrum is the style rule that is targeted specifically at a particular element. This may be by way ...