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

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss

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 red-a.jpg.

0435a.jpg

Click to view larger image

red-a.jpg The cascade order from most important to least important.

  1. User styles

    Most Web browsers allow users to specify their own default style sheets. 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 worth only 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. Inherited

    These styles are inherited from the parent.

  8. Inherent

    These styles are applied by the browser to HTML tags and are the least important.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus