This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

CSS Precedence

David Baron's answer

CSS and FONT interaction

Does the specificity of CSS rules mean that they override non-CSS markup like <FONT>?

It's not the specificity of the rules that causes the non-CSS presentational hints to take precedence, it is the level of nesting in the tree. Non-CSS presentational hints are, according to CSS2, [1] translated into the corresponding CSS rules and treated as if they occurred at the beginning of the CSS style sheet with specificity zero. This means that appropriate CSS rules in the author style sheet always override them (as do !important rules in the user stylesheet).

However, the important question is *what* author rules override them. The answer to this question comes from the way CSS selectors work. Selectors match elements in the document tree. The default (which is often to inherit from the parent) only occurs when *no* selector matches the element. This means that if a UA style sheet has:

 H1 { font-size: 24px; color: red; } /* UA, specificity 1 */

and an author style sheet has:

 DIV#id1 { font-size: 16px ! important; color: green ! important; } /* author -important, specificity 110 */

you will still get

This header is 24px

even though the DIV selector is more important than the H1 selector in three ways (weight, origin, and specificity). This happens because the H1 selector still matches the H1. The only way to override that is to use another selector that actually matches the H1, for example, any of:

 DIV#d1 H1{ font-size: 16px ! important; } H1{ font-size: 16px ! important; } DIV#d1 *{ font-size: 16px ! important; } (using the universal selector, which is notwell supported yet).

Now, what does this mean for non-CSS presentational hints? It means that they can always be overridden by author CSS that acts on the HTML element that provides the presentational hint. For example, the ruleset:

 FONT { color: inherit;font-size: inherit;font-family: inherit; }

in an author stylesheet will neutralize all FONT elements (assuming that "inherit" works, which it doesn't yet.) To do this in a user styleesheet, one would need to use the weight "! important". However, styling an element that occurs on the outside of the non-presentational hint will do nothing (since the rule applied by the non-presentational hint overrides the default inheritance), and styling an element inside of it will always have an effect, even if the style is in a UA stylesheet. The rules for handling non-CSS presentational hints only act when CSS selectors *match* the HTML elements providing the presentational hints. For example, the following 2 statements are true because of the tree structure of the document:

 <SPAN STYLE="color: green;"> <FONT COLOR="red">

This text is red.

 </FONT> </SPAN> <FONT COLOR="red"> <SPAN STYLE="color: green">

This text is green.

 </SPAN> </FONT>

An example of a situation that *is* affected by the rules for non-CSS presentational hints given in CSS2 is the following:

 <FONT COLOR="red" STYLE="color: green"></FONT>

This text should be green.

However, if the user stylesheet contained the rule

 FONT { color: green; }

then what would happen is:

 <FONT COLOR="red">

This text is red.


because the non-presentational hint is treated as if it were a CSS rule at the beginning of the author stylesheet, and therefore overrides a rule in the user stylesheet.

Finally (and most importantly), how do the browsers handle this? Does this actually mean anything? Surprisingly, the browsers handle it quite well in its interaction with author stylesheets (interaction with user stylesheets is not quite so good). I wrote a test for this behavior [2], and MSIE 5 beta 2 passes the test perfectly. Netscape 4.5 has a few bugs with PRE and with BODY backgrounds, but handles the FONT FACE examples fine. (I tested FONT FACE, not FONT COLOR.)

David Baron

[1] W3C reference on non-CSS presentational hints

[2] Test of interaction of CSS and non-CSS presentational suggestions

Does the specificity of CSS rules mean that they override non-CSS markup like <FONT>?

Sue Sims