CSS Cascade and Importance: How CSS Rules Are Applied

Live editor for all the examples will be added soon.

CSS (Cascading Style Sheets) is all about applying styles to HTML elements, but what happens when multiple styles are targeting the same element? This is where the cascade and importance of CSS come into play. The term cascade refers to the process by which CSS rules are applied in order of priority, and importance helps resolve conflicts when more than one rule applies to the same element.

In this guide, we will break down how CSS rules are applied, explain the cascade, the role of specificity, and the importance of !important in determining which styles take effect on your elements.

1. What is the CSS Cascade?

The CSS cascade determines the order in which conflicting CSS rules are applied to an element. When multiple rules target the same element, the browser has to decide which rule takes precedence. This process is based on three main factors:

  1. Importance (the use of !important).
  2. Specificity (how specific the selectors are).
  3. Source order (the position of the rules in the stylesheet).

2. The Order of Importance in CSS

The order in which styles are applied follows a hierarchy, giving some rules more weight than others. When multiple styles conflict, the browser resolves them using the following priority levels:

2.1 Importance (!important)

The highest level of priority in CSS is given to styles marked with !important. This overrides any other rule, regardless of specificity or source order. However, overusing !important can make your CSS harder to maintain, so it should be used sparingly.

Example:

p {
  color: red !important;
}

p {
  color: blue;
}

In this case, the paragraph text will be red because !important overrides the normal cascade rules.

2.2 Inline Styles

Inline styles, written directly in the HTML element using the style attribute, have a high level of priority, though they are still overridden by !important declarations.

Example:

<p style="color: blue;">This text is blue.</p>

Inline styles are often more specific and take precedence over styles in external stylesheets (unless overridden by !important).

2.3 IDs, Classes, and Element Selectors

Selectors also have different levels of specificity:

  • ID selectors (e.g., #id) are more specific than class or element selectors.
  • Class selectors (e.g., .class) and attribute selectors (e.g., [type="text"]) are less specific than IDs but more specific than element selectors.
  • Element selectors (e.g., p, h1) have the lowest specificity.

The more specific the selector, the higher priority it has in determining the applied style.

2.4 Source Order (Last Rule Wins)

If two or more rules have the same specificity, the last rule in the source code takes precedence. This means that if multiple rules with the same specificity target the same element, the rule that comes last in the CSS will be applied.

3. Understanding Specificity

Specificity is a key factor in determining which styles are applied when multiple rules target the same element. The more specific a selector is, the more weight it has in the cascade. Specificity is calculated based on the types of selectors used.

3.1 How Specificity Works

Specificity is calculated using a point system. It consists of four components (A, B, C, and D):

  • A: Inline styles have the highest specificity.
  • B: ID selectors (#id) are next in specificity.
  • C: Class selectors (.class), attribute selectors ([type="text"]), and pseudo-classes (:hover, :nth-child) follow.
  • D: Element selectors (h1, p, div) and pseudo-elements (::before, ::after) have the lowest specificity.

Example:

/* Element Selector (1 point in D) */
p {
  color: blue;
}

/* Class Selector (1 point in C) */
.highlight {
  color: red;
}

/* ID Selector (1 point in B) */
#important {
  color: green;
}

In this example:

  • The element selector (p) has the lowest specificity.
  • The class selector (.highlight) has a higher specificity than the element selector.
  • The ID selector (#important) has the highest specificity and will override both the class and element selectors.

3.2 Specificity Calculation Example

Given the following rules:

/* Element Selector */
div {
  color: blue;
}

/* Class Selector */
.content {
  color: green;
}

/* ID Selector */
#main {
  color: red;
}

If you have an element like this:

<div id="main" class="content">This text is red.</div>
  • The element selector (div) has 0-0-0-1 specificity.
  • The class selector (.content) has 0-0-1-0 specificity.
  • The ID selector (#main) has 0-1-0-0 specificity.

Because the ID selector has a higher specificity than the class and element selectors, the text color will be red.

4. Source Order: The Last Rule Wins

If two or more rules have the same specificity, the rule that appears last in the CSS code takes precedence. This is known as the “last rule wins” principle.

Example:

p {
  color: blue;
}

p {
  color: red;
}

In this example, the second rule (color: red;) will be applied because it appears last in the source order.

5. The Role of !important in CSS

The !important declaration is used to override normal specificity rules. When a style is marked as !important, it takes the highest precedence, even over inline styles and styles with higher specificity.

Syntax:

element {
  property: value !important;
}

Example:

p {
  color: blue !important;
}

p {
  color: red;
}

Here, the !important rule makes the paragraph text blue, even though there is another rule declaring it should be red.

Caution:

While !important is a powerful tool, it should be used sparingly. Overusing it can lead to difficulties in maintaining and debugging your CSS, as it overrides the natural cascading order.

6. Practical Examples of CSS Cascade and Importance

6.1 Example with Element, Class, and ID Selectors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Cascade Example</title>
  <style>
    /* Element selector */
    p {
      color: black;
    }

    /* Class selector */
    .highlight {
      color: blue;
    }

    /* ID selector */
    #important {
      color: red;
    }
  </style>
</head>
<body>

  <p>This is a paragraph.</p>
  <p class="highlight">This is a highlighted paragraph.</p>
  <p id="important">This is an important paragraph.</p>

</body>
</html>

Explanation:

  • The first paragraph will be black because it is styled by the element selector.
  • The second paragraph will be blue due to the class selector.
  • The third paragraph will be red because the ID selector has higher specificity than the class or element selectors.

6.2 Example Using !important to Override Styles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Importance Example</title>
  <style>
    /* Normal rules */
    p {
      color: blue;
    }

    /* Using !important to override */
    .highlight {
      color: red !important;
    }
  </style>
</head>
<body>

  <p class="highlight">This paragraph will be red due to !important.</p>

</body>
</html>

Explanation:

  • Even though the p element is normally styled with color: blue, the !important declaration in the class selector makes the paragraph red, overriding the element selector.

7. Combining Cascade and Media Queries

Media queries can also be affected by the cascade. For example, rules inside a media query may override styles outside of it if they have higher specificity or appear later in the source order.

Example:

p {
  color: blue;
}

@media (max-width: 600px) {
  p {
    color: red;
  }
}

In this example:

  • On screens wider than 600px, paragraphs will be blue.
  • On screens narrower than 600px, paragraphs will be red due to the media query.

8. Tips for Managing CSS Specificity and Cascade

  • Avoid Overusing !important: Use !important sparingly to avoid making your CSS difficult to maintain.
  • Use Specificity Wisely: Rely on selector specificity to structure your stylesheets. Use class selectors for reusable styles and ID selectors for one-off elements.
  • Organize Styles: Write your CSS in a logical order, starting with general styles (e.g., element selectors) and moving to more specific ones (e.g., class and ID selectors).
  • Use Comments: Add comments in your CSS to explain why a certain rule is used, especially when dealing with specificity issues.

Conclusion

The CSS cascade and importance are key concepts for determining how styles are applied to elements. By understanding the cascade, specificity, and the role of !important, you can gain full control over how your styles are applied and resolve conflicts in your CSS.