Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
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 circle-a.jpg.

  1. User styles

    Most Web browsers allow users to specify their own default style sheet. In principle, these always have precedence over other styles.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. Parent inherited styles

    These styles are inherited from the parent.

  8. Browser default styles

    These styles are applied by the browser and are the least important.

  • + Share This
  • 🔖 Save To Your Account