CSS Cascade

From the previous lessons, you learnt that a style rule is applied to an HTML element. But, there have situations when multiple rules are defined for a single element. In this case cascading happens. It is the word that is the elaboration form of the letter C in CSS.

What is CSS cascade

A set of predefined rules that determine the order of style to an HTML element if more than one styles are defined for one element.

How style cascade

Consider that a style rule is declared multiple times. Which one will be applied in the targeted HTML element? The following three main things determine the style order-

Source of styles,
Source order, and
Specificity

Let’s dig more on each of the above-

Source of style

When more than one style try to influence an HTML element then find out the source of those styles. Depending on the source where a style is written, the order of the styles varies. CSS cascading maintains the following order, the later will overwrite the previous styles-

Browser (user agent) style sheet: Every browser has a built-in style sheet. If you don’t use CSS in your HTML page at all and open it in a browser, you’ll still find different elements look different. For example, text inside h1 element looks large and bold, anchor text looks blue and underline etc. It is the browser style sheet that defines these rules. As different browsers use slightly different style rules, so, there is slight difference among the output of the same HTML page.
User style sheet: Browsers also allow you (user) to change their default styles. It is known as user style sheet. After editing any style here, it will overwrite the browse’s default style. It is like other style sheets you use.
Author style sheet: Author style sheets are those that you create yourself and attach with the HTML pages. You already learnt three different ways to attach CSS to your HTML pages in the Adding CSS to HTML. If you write a style rule for an element which is already declared before either in user style sheet or in user agent style sheet, your style will win.
Important declaration at author style sheet: If you add the word ‘!important’ after the value in a style rule in your style sheet, it will win over the same style rule declared in any of the previous three style sheets.
For example, consider the following css code is written in an author style sheet-
```
h1{
    color: red !important;
}
```
Now, the text inside h1 element will become red no matter which color is defined for the same style rule in the user agent style sheet or in the user style sheet previously.
Important declaration at user style sheet: If the declare a style rule with the word ‘!important’ in the user style sheet, it will win over anything else.
For example, consider the following css code is written in an user style sheet-
```
 h1{
    color: blue !important;
}
```
Now, the text inside h1 element will become blue even the same style rule is defined in the author style rule or else where.

Source Order

If you write a style rule more than once in a style sheet, the later will overwrite the previous one. You can remember this in the way that the style rule which is the nearest to the element wins. Lets see few examples-

Same style rules in the same style sheet: Suppose, you write following two style rules in either an external or in an internal or in the inline style rules. Which will win?
```
h1{
color: blue;
}
h1{
color: red;
}
```
Well, the later one and text inside the h1 will become red.
Same style rules in both external and/or internal style sheets and inline style rule: If the same style rule is existed in both external and/or internal style sheet and in inline style rule, then, the one declared in inline wins. As mentioned earlier that style declared nearest wins. Inline rule is the nearest one, so it wins. See the example-
```
<html lang="en">
    <head>
        <style>
            h1{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 style=”text:red”>This is a heading</h1>
    </body>
</html>
```
The text “This is a headline” will become red in color.

Specificity

So far you’ve seen examples of cascading of the same style rules (and same selectors) defined multiple times. But, what about if different selectors with different styles select the same element? In this case which selector will win? Well, It will depend which selector selects the element more specifically and it is known as specificity. You’ll learn about specificity in the next lesson, CSS Specificity.