- The Element Family Tree
- Defining Styles Based on Context
- Working with Pseudo-classes
- Working with Pseudo-elements
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Inheriting Properties from a Parent
- Making a Declaration !important
- Determining the Cascade Order
- Putting It All Together
This chapter is from the book
This chapter is from the book
This chapter is from the book
Determining the Cascade Order
Within a single Web page, style sheets may be linked, imported, or embedded. Styles may also be declared inline in the HTML.
In addition, many browsers allow visitors to have their own style sheets that can override yours. It’s guaranteed, of course, that simultaneous style sheets from two or more sources will have conflicting declarations. Who comes out on top?
The cascade order refers to the way styles begin at the top of the page and, as they cascade down, collect and replace each other as they are inherited. The general rule of thumb is that the last style defined is the one that is used.
However, at times, two or more styles will conflict. Use the following procedure to determine which style will come out on top and be applied to a given element.
To determine the cascade-order value for an element:
Collect all styles that will be applied to the element. Find all the inherent, applied, and inherited styles that will be
applied to the element, and then use the following criteria to determine which styles are applied in the cascade order, with
the criteria at the top being most important 
.
)
- User styles
Most Web browsers allow users to specify their own default style sheet. In principle, these always have precedence over other styles.
- Inline styles
If the style is inline (see Chapter 3), it is always applied regardless of all other factors. That’s why you should never use them in your final HTML code.
- Media type
Obviously, if the media type is set for a style and element that is not being displayed in that media type, the style will not be used.
- Importance
Including !important with a declaration gives it top billing when displayed. (See “Making a Declaration !important” in this chapter.)
Many browsers let users define their own style sheets for use by the browser. If both the page author and the visitor have included !important in their declarations, the user’s declaration wins.
In theory, an author’s style sheets override a visitor’s style sheets unless the visitor uses the !important value. In practice, however, most browsers favor a user’s style sheet when determining which declarations are used for a tag.
- Specificity
The more contextually specific a rule is, the higher its cascade priority. So the more HTML, class, and ID selectors a particular rule has, the more important it is. In determining this priority, ID selectors count as 100, classes count as 10, and HTML selectors are worth only 1. Thus,
#copy p b { color: red; }is worth 102, whereas
b { color : lime; }is only worth 1. So, the first rule would have higher specificity and the color would be red.
This priority setting may seem a bit silly at first, but it allows context-sensitive and ID rules to carry more weight, ensuring that they will be used.
- Order
If the conflicting declarations applied to an element are equal at this point, CSS gives priority to the last rule listed, in order. Remember that inline styles always win.
- Parent inherited styles
These styles are inherited from the parent.
- Browser default styles
These styles are applied by the browser and are the least important.