Navigating the Cascade - An Inquiry Into Values - HTML with Style

An Inquiry Into Values

Navigating the Cascade

After the user agent gathers the rules from all the various sources it can access (inline styles, embedded style sheets, linked style sheets, imported style sheets, user style sheets and its own style sheet), it assigns the various rules to elements. When more than one rule sets the same property and applies to the same element, the user agent will pick only one of these rules using a mechanism described below. But first, I'll tell you about !important rules.

!important Rules

!important rules have priority over other rules. To specify a rule as !important, just add !important after the rule itself.

P {
 margin-top: 0 !important;
 color: red;
}
H1 {
 font-size: 150% !important;
 text-align: center;
}

In the above example, the rules that set the margin-top and font-size properties are specified as being !important, while the others are not. The only difference this makes is in....

The Cascading Order

The process of taking style declarations from various sources and combining them to find which applies is called cascading. Cascading is really simple; if two or more rules conflict, one of them is selected using the following criteria, each being used if the previous one didn't sort out the applicable rule:

1. Important styles override non-important styles
2. Author styles override user styles, which in turn override user agent styles. Important user styles override important author styles, which in turn override important user agent styles.
3. Rules whose selectors have higher specificity override those with lower specificity (see below)
4. Lastly, rules that have been specified last override previously specified rules. Rules in imported style sheets are considered to have been specified before rules in the style sheet that imported them. This is why @import rules are always placed at the top of a style sheet; it makes it easy to remember that the rules in the style sheets they import are not as "strong" as the rules in the style sheet after the at-rules.

Confused? Let's look at a couple of examples. Let's suppose that the user agent default style sheet specifies that P elements have a margin-left property of 0.5cm. Say we have two style sheets, called sheet1.css and sheet2.css, and a user style sheet.

sheet1.css:

@import "sheet2.css";
P { margin-left: 2cm; }

sheet2.css:

P { margin-left: 1cm; }

User style sheet:

P { margin-left: 3cm; }

Barring other rules that apply to paragraph elements, the user agent will set the value of margin-left to 2cm. The user-specified value is overridden by the author-specified values in sheet1.css and sheet2.css. Of these, the one in sheet1.css is specified last (remember that it's after the @import rule), so it overrides the other one, and is the only one left. Now look at this scenario:

sheet1.css:

@import "sheet2.css";
P { margin-left: 2cm; }

sheet2.css:

P { margin-left: 1cm !important; }

User style sheet:

P { margin-left: 3cm; }

Here, the rule in sheet2.css is !important and the other two are not, so it overrides them, and the value of margin-left becomes 1cm. Lastly, let's look at what happens if all three rules are important:

sheet1.css:

@import "sheet2.css";
P { margin-left: 2cm !important; }

sheet2.css:

P { margin-left: 1cm !important; }

User style sheet:

P { margin-left: 3cm !important; }

In this case, because we are comparing important rules, the user-specified rule takes precedence over the author-specified rules, so the value is set to 3cm. Now you can see the usefulness of important rules: Users can use them to make sure that their styles are not overriden by authors.

Specificity

In number 3 above, I mentioned that rules whose selectors have higher specificity override those with lower specificity. Specificity is another sorting mechanism. Specificity sorts rules according to how specific the selectors that apply to an element were. There is a numerical approach to obtaining specificity, but it's easier to think of it like this: Take the selectors and sort them using the following criteria:

1. Sort the rules by the amount of ID's specified.
2. If there is a tie between rules, sort them by the amount of classes specified.
3. If there is still a tie, sort them by the amount of element types specified.

So, DIV.one P SPAN#special EM#very has higher specificity than DIV.one SPAN#special EM#very, which has higher specificity than DIV SPAN#special EM#very, which has higher specificity than DIV SPAN EM.

Both Explorer and Navigator respect cascading order and will choose declarations that have higher specificity. Navigator, however, does not recognize important rules, and treats them as if they were not important, so be careful when you cascade style sheets to not rely on important rules to override non-important ones, because Navigator won't.

Now Forget All That

If you're finding all of this a little daunting, that's OK. You'll probably never worry about specificity and cascading at all, and user style sheets that do really wierd things will be pretty rare, so just remember the general principles ("narrower" selectors win, the last rule wins, the author wins over the user). Now that we've got that out of the way, let's take a look at inheritance.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998