XHTML Mobile Profile and CSS Reference: The Cascade

The Cascade

Cascading Style Sheets "cascade" by making it possible to import or declare multiple sets of style sheets in a document, relying on fixed rules for how conflicts are resolved. This is often referred to as "the precedence of styles." Understanding those rules is a key to creating an effective use of multiple style sheets.

Many factors affect the precedence of styles, including:

The default style of the phone, that is, how elements are presented in the absence of presentation rules from a style sheet.
Inheritance, that is, the rules under which style rules are inherited by elements from their containers. Each of the CSS properties in the second part of this chapter indicates whether its values are inherited by default. You can also use the inherit keyword, used by many CSS properties, to manipulate the inheritance cascade (see Keywords for more information).
A style rule that is more specific takes precedence over a less specific, conflicting rule. For example, a style rule applied to a class of elements takes precedence over a rule that applies to an element in general, and a rule that applies to an element ID takes precedence over both.
Other things being equal, the most recent style rule in a document takes precedence over earlier style rules. For example, if rules conflict in two imported style sheets, the rule in the second style sheet takes precedence. Also, if multiple style rules in a <style> element conflict, the last one in order one takes precedence.
In a related effect, if a style rule in a style sheet conflicts with a presentational attribute of an XTHML-MP element, the style sheet takes precedence.

IMPORTANT As described at the beginning of this chapter, the more elaborate your manipulation of the cascade, particularly the more style sheets you bring to bear on a document, the greater the risk of impairing the performance of your applications on real phones. The art of CSS is the elegant, simple manipulation of the cascade.