Re: Precedence within a stylesheet

Andi Hindle wrote:
> I'm trying to figure out what takes precedence over what in a
stylesheet.
> Thus, given:
> 
> body {
> 
>      color : #FFFFFF;
> }
> 
> h1 {
> 
>      color : #FF0000;
> }
> 
> will my <h1> turn out red or white?

As long as there are not multiple CSS1 declarations for one element,
what takes precedence has nothing to do with the order of declarations.
It has to do with the nesting of elements in the HTML markup.

From section 3.2 of the spec: "Declarations apply if the selector
matches the element in question. If no declarations apply, the
inherited value is used."

In your 2-declaration example, BODY will always be an ancestor element
of H1. If H1 had no color declaration, it would inherit the color of
BODY. But since you have declared a color value for H1, that
declaration will always take precedence over any parent element's and
inheritance will not apply.

Another example (assuming no declarations for P in a user stylesheet):

   BODY {
       font-style: normal;
       font-weight: normal;
       color: green }
   I {
       font-style: italic;
       color: red }
   B {
       font-weight: bold;
       color: blue }
   ...

   <BODY>
   <P>This text is green. Color has not been declared for
   P so P inherits the color of BODY. <B>This text is bold
   blue. <I>This text is bold italic red. Font-weight is
   inherited from the parent B, but the declared values for
   font-style and color take precedence.</I></B> <I>This
   text is italic red. <B>This text is bold italic blue.
   Font-style is inherited from the parent I, but the declared
   values for font-weight and color take precedence.</B></I>
 

David Perrell

Received on Thursday, 18 September 1997 16:24:38 UTC