The CSS Cascade

Inheritance makes it possible for a link to inherit CSS properties from both the <body> and <p> tags that precede it. It is possible for styles to collide, and there is a system, known as the css cascade that governs conflicting styles.

How Styles Cascade

The css cascade is a set of rules that determine which style properties get applied to an element. These happen in two ways:

  1. The same property is inherited from multiple ancestors
  2. One or more styles apply to the same element (i.e. a <p> with a <p> style and a class)

Inherited Styles Accumulate

A HTML element acquires formatting that its ancestors contained. Consider the following example

body { font-family: Veranda, Arial, Helvetica, sans-serif; }
p { color: #f30; }
strong { font-size: 24px; }

The strong tag contains the following styles

strong {
  font-family: Veranda, Arial, Helvetica, sans-serif;
  color: #f30;
  font-size: 24px;
}

Nearest Ancestor Wins

In the above example, there were no conflicting styles. Imagine if there were. If there were the web browser would apply the style closest to the tag in question.

The Directly Applied Style Wins

Properties applied to a style directly beat out any conflicting inherited properties.

One Tag, Many Styles

Inheritance makes it possible for a tag to be affected by multiple styles. You can also have a tag have multiple styles apply from applying multiple styles to it. Imagine a <p> tag that has an internal sheet with a <p> style and an external sheet with a <p> style. Imagine that the <p> tag also has a class style applied to it.

This is fine if none of the styles are conflicting. The next section deals with how the css cascade handles conflicts.

Specificity: Which Style Wins

The CSS cascade follows a formula to determining specificity when multiple styles apply

    • A tag selector is worth 1 point
    • A class selector is worth 10 points
    • An ID selector is worth 100 points
    • An inline style is worth 1,000 points

Consider the following example:

a { font-weight: italic; }
p a { font-weight: bold; }
.byline a { font-weight: normal; }

The first style would have a specificity of 1 point. The second one of 2 points and the 3rd one of 11 points. The third one would be the winning style.

The Tiebreaker: Last Style Wins

p .email { color: blue; }
.byline a { color: red; }

In the above example (both styles targeting an <a> tag) the styles both have the same specificity. When this happens the browser applies the last stylesheet.

Overruling Specificity

If you add !important after any CSS property, it will apply and override more specific styles.

a {color: teal !important; }

 

Controlling the Cascade

If there is a style with a greater specificity you have two options. First you can add important!. Second you can add more specificity to the style. It is best to change the specificity and only use important for real emergencies.

CSS Cascade Conclusion

This concludes the tutorial on the CSS Cascade. Hopefully next time you are writing CSS and wondering why the style you wrote won’t apply you will be able to troubleshoot better.

Published by burnedfaceless

Brian Abbott is studying IT and Music Composition at Georgia Southern University.

Leave a comment

Your email address will not be published. Required fields are marked *