Lecture 16: Understanding the Cascade
Overview:
- Author, User, and Browser Settings
- What is the Cascade?
- What are the Specificities?
- The Use of !important
- Inheriting Style Information
- Order Effects
- Summing Up the Cascade
Author, User, and Browser Settings
- Style information comes from 3 sources: Author Styles (what we specify in our style sheets), User Styles (user-created style sheets), and the settings in the browser's internal stylesheet(s).
- If there is a conflict, author settings trump user settings which trump browser settings (an even more specific breakdown of this hierarchy is given later).
- One possible scenario: Your style sheet indicates <h1> text should be black, while the user's style sheet specificies that <h1> text should be white. Your text color is used. However, you didn't specify a background color behind that <h1> text, but the user specified that the background color should be black behind <h1>. Since there was no conflict on the background property, the user setting is implemented. Now there is black text on a black background.
- For this reason it is wise to specify a background color for elements where user settings could reasonably be expected to interfere. In most cases, setting a background color for <body>, <div>, and <td> (if tables are used) is sufficient.
- The use of !important (discussed later in this lecture) in a user style sheet allows it to trump the author style sheets, although not all browsers support this.
What is the Cascade?
- If there are two (or more) conflicting rules applied to a tag/element, the cascade determines which rule is used and which is/are ignored.
- Stated differently, the cascade is a set of guidelines governing how various rules (and style sheets) interact.
- Every rule has some degree of weight or influence, determined by how it is specified in the CSS. This is referred to as its specificity, which determines the degree of priority it can claim over other rules.
- When values in different rules conflict, the value with the greater specificity is used. Note that non-conflicting values combine together. The cascade and specificities only enter the picture if two rules disagree on a particular setting for a property.
What are the Specificities?
Single Elements
- Single elements have a specificity of 1 (regardless of the element).
- Example: blockquote {color: purple;} /* specificity of 1 */
Groups of Elements
- Making a contextual selector by adding elements to a selector (without commas) increases specificity by 1 for each additional element.
- Separating elements with commas results in each element having a separate specificity assigned.
- Example 1: blockquote em strong {color: yellow;} /* specificity of 3 */
- Example 2: blockquote, em, strong {color: yellow;} /* each of the three elements has a specificity of 1 */
- Example 3: blockquote, em strong {color: yellow;} /* blockquote has a specificity of 1, em strong has a specificity of 2 */
Classes
- Classes have a specificity of 10.
- The specificity of classes and elements combine in a cumulative fashion.
- Example 1: .nav {color: blue;} /* specificity of 10 */
- Example 2: p.nav {color: red;} /* specificity of 11 */
- Example 3: p.nav strong.red {color: red;} /* specificity of 22 */
IDs
- IDs have a specificity of 100 (they should only be used once, so they should have greater weight than other rules).
- IDs also have a cumulative specificity when combined with elements
- Example 1: #nav {color: blue;} /* specificity of 100 */
- Example 2: p#nav {color: blue;} /* specificity of 101 */
Inline Styles
- Inline styles have a specificity of 1000 because they are coded directly into the element.
Pseudo-Classes
- Pseudo-classes (:link, :visited, :hover, :focus, :active) are treated like other classes (they have specificities of 10).
The Use of !important
- Sometimes you really want something to look a certain way and don't want to worry about other rules overriding your desired effect. Inserting !important into a property/value pair just prior to the closing semicolon (;) does just that, giving that instruction a specificity of 10,000.
- Example: p.nav {background: #fff; color: red !important;}
- Note: Be sure to correctly place !important, or you will encounter difficulties with the rule functioning at all. !important is also not supported in version 4 browsers (unless you are counting Opera, which had support in version 3.6).
Inheriting Style Information
- In some cases you will have tags (such as <em>) that have no rules applied to them. If <em> is nested within another element (such as <h1>) that does have rules established, the <em> will inherit the same rules from its parent (and other tags even further out that hold the element).
Example 1:
<h1 style="color: blue; font-size: 14px;">Hello <em>class</em></h1>
The <em> has no rules defined, thus it will render as:
Hello class
- The <em> inherits the blue color and the font size from the outer set of tags.
- When inheriting style information from an outer tag, that information has a null specificity (essentially a specificity of 0), no matter how strong the specificity is for that surrounding tag. Thus anything at all can override the inherited information, as long as there are conflicting values.
Example 2:
<h1 style="color: blue; font-size: 14px;">Hello <em style="color: red;">class</em></h1>
The <em> has a conflicting color value defined so this will render as:
Hello class
- The word 'class' becomes red because the specificity for red color is 1000 (due to it coming from an inline style for <em>), which is greater than the inherited null specificity from the <h1> tag for the blue color.
- The bottom line here is that tags will inherit the values of surrounding tags unless they have their own conflicting values specified, in which case those rules will go into effect (because any rule, even a very simple one, will have a specificity of 1).
- It should be noted that legacy browsers (e.g., Netscape 4.x) have many inheritance difficulties, which often require redundant style information to be applied broadly to various elements that should normally inherit their style information from <body>.
- Modern browsers do a much better job with inheriting styles properly, but even they fail to inherit style information properly from <body> into form elements, requiring those styles to be specifically applied to the form elements in the style sheet (this is covered in detail in INP 170: Web Coding II).
- Windows IE 5.x also has issues with inheriting text styling into table cells; they inherit font family but not font size.
- Testing cross-browser and cross-platform is essential because it identifies any issues with inheritance that need to be addressed.
Order Effects
- What if you have two rules with the same specificity? The one appearing later in the style sheet is given priority in the cascade, as it is closer to the point of rendering. A rule appearing later in the same embedded, inline, or external style sheet will override what is specified previously.
- When calculating order external style sheets come before embedded styles, which come before inline styles.
- In the bigger picture of conflicting styles, the following hierarchy exists for determining which styles take precedence:
- User styles with !important
- Author styles with !important
- Author styles
- User styles
- Browser styles
Summing up the Cascade
| Selector/Method | Specificity |
|---|---|
| Each element specified | 1 |
| Classes | 10 |
| Pseudo-classes | 10 |
| IDs | 100 |
| Inline styles | 1000 |
| !important | 10,000 |