---
title: "CSS Cascade Tutorial"
url: https://weworkworldwide.com/tutorials/cascade/
description: "CSS Cascade Tutorial: If you think about it, using CSS we create rules! For example if element A was the child of element B then apply those styles or If…"
date: 2026-11-11T09:00:04+00:00
source: https://weworkworldwide.com/llms.txt
---

# CSS Cascade Tutorial

``` line-numbers
```

If you think about it, using CSS we create rules! For example if element A was the child of element B then apply those styles or If an element has a class attributes with the value of ABC then apply these styles or if an element has an id attribute with the value of id-one then apply that style etc.

After that, browsers take these styles (rules) and figure out the places where each rule is applicable and based on these rules will render the pages.

But if there are two or more rules (styles) that apply to the same element, it is important to know which one takes precedence over the other.

This is where CSS Specificity comes in.

In short, browsers always look for and choose those styles that are more *specific*.

So CSS provides a formula that browsers can use in order to figure out which style is more specific and the other (This formula helps developers as well in order to create more specific styles than the others).

Based on this formula, the worthiness of the value that we assign to a style’s selector is different if it is a tag selector or id selector or class selector etc.

Take a look at the table below:

| **Selector Type**  | **Example**             | **Worth**   |
|--------------------|-------------------------|-------------|
| **Tag**            | p { }                   | 1 point     |
| **Class**          | .class-name { }         | 10 points   |
| **Id**             | #id-name { }           | 100 points  |
| **Pseudo-Element** | ::first-line            | 1 point     |
| **Pseudo-Class**   | :hover                  | 10 points   |
| **Inline style**   | <p style=”color:red”> | 1000 points |

In the table above, those selector types that have higher points have higher priority as well.

For example let’s say you have an element like:

``` line-numbers
<p id="p-id"> this is for test</p>
```

And there are two CSS styles to be applied to this element. The type of selector for each style is like this:

``` line-numbers
#p-id{
color:blue;
}
p{
color:red;
}
```

In this case the CSS style that has the #p-id for its selector will format the <p> element because as the table above showed, id selector has 100 points but tag selector has only 1 point.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#p-id{
color:blue;
}
p{
color:red;
}
</style>
</head>
<body>
<p id="p-id">this is for test</p>
</body>
</html>
```

You should know that these priorities only matters when two or more CSS styles target the same element/s and trying to override properties of each other.

If each style using different property/ies to style an element ( for example one style wants to change the color property and another style formats the element using “border” property) in this case both styles will apply to the target element because no style tries to override properties of the other.

The table below shows how using one or more selector can increase or decrease the priority of that style:

``` line-numbers
Note: Higher Total-points = Higher priority.
```

| **Selector**             | **Id** | **Class** | **Tag** | **Pseudo-element** | **Pseudo-class** | **Total points** |
|--------------------------|--------|-----------|---------|--------------------|------------------|------------------|
| **li**                   |        |           | 1       |                    |                  | 1                |
| **p.cat**                |        | 10        | 1       |                    |                  | 11               |
| **#ul**                 | 100    |           |         |                    |                  | 100              |
| **#price p.class-name** | 100    | 10        | 1       |                    |                  | 111              |
| **#id1 #id2 #id3**    | 300    |           |         |                    |                  | 300              |
| **#id1 .animal**        | 100    | 10        |         |                    |                  | 110              |
| **p::first-line**        |        |           | 1       | 1                  |                  | 2                |
| **#user:hover**         | 100    |           |         |                    | 10               | 110              |
| **ul li**                |        |           | 2       |                    |                  | 2                |

To explain a few selectors in the table above:

-   The first selector is a tag and we know that based on the CSS  
    formula, the worthiness of a tag is 1 point and that gives us the total  
    points of 1. So the priority of this selector is 1.

-   The next selector is a tag with the combination of a class-name.  
    In this case, one point goes for the tag and 10 points goes for the  
    class and that gives us the total points of 11. So the priority of this  
    selector is 11

-   The next selector is a single id. In this case, 100 points goes  
    for id selector and the total points are 100. So the priority of this  
    selector is 100.

As you can see the more value assigned to a style’s selector, the more priority that styles can get.

Last selector wins

If there are two styles targeting the same element and the selectors for both styles have the same priority (let’s say because both styles used the tag-name as the value of the selector), in this situation the latter of the two styles takes the precedence.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>CSS is Fun</h1>
</body>
</html>
```

Priority of the two styles in the example above is the same but because the one with the value “blue” for the *color-property* came last, it’s the winner style and it will format <h1> element then.

More examples:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#p-id{
color:blue;
}
p{
color:red;
}
</style>
</head>
<body>
<p id="p-id">this is for test</p>
</body>
</html>
```

In the example above, the style with id selector wins because it has a higher priority.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#albert{
color:blue;
}
p.paragraph{
color:red;
border:double;
}
</style>
</head>
<body>
<p id="albert" class="paragraph">Imagination is more important than knowledge.</p>
</body>
</html>
```

In the example above, the two styles trying to override each other in terms of the value for *the color property* and the one with id selector is the winner because of the higher priority attached to an id selector. But the style that used p.paragraph as the value for its selector, has “border” property as well and because there’s no other styles with higher priority to set the value of this property, then the border’s value of this style will apply to the <p> element.

Another example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#albert{
color:blue;
}
</style>
</head>
<body>
<p id="albert" class="paragraph" style="color:red;">Imagination is more important than knowledge.</p>
</body>
</html>
```

As we mentioned before, the priority of “inline style” is worth 1000 points. So in the example above the “inline style” of the <p> element is the winner because of its higher priority compared to the style with id selector.

The keyword “!important”:

We use this keyword next to a value we assign to a CSS property if we want that value to be the absolute winner value that is going to be used to format an element.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
color:blue !important;
}
</style>
</head>
<body>
<p id="albert" class="paragraph" style="color:red;">Imagination is more important than knowledge.</p>
</body>
</html>
```

In the example above, even though “inline style” has the highest priority (worth 1000 points), it’s the style element with p-selector that’s going to format <p> element because it used “!important” next to the value assigned to “color” property.

Note: Only the value of those properties that comes with “!important” keyword as well will be used to format the target element. Basically this keyword works only on an individual property not the entire style.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
color:blue !important;
border:solid;
}
</style>
</head>
<body>
<p id="albert" class="paragraph" style="color:red; border: double;">Imagination is more important than knowledge.</p>
</body>
</html>
```

In the example above, only “color” property of the style with “p selector” will be used to format the <p> element (because we used the keyword “!important” next to the value). But the “border” property of this style won’t be used to format the target element for two reasons:

First: the priority of this style is lower than the inline style.

Second: there’s no “!important” keyword next to the value assigned to the “border” property of this style.

Final notes:

The use of “!important” keyword should be as low as possible. Because it puts the highest priority on a property and so if you use it too much, styles within a webpage won’t follow the normal rules of cascading which makes debugging more difficult for developers.

Also, it’s better to use class selector over id selector. Because using id selector puts a high priority on the style that use it and makes it more difficult to override a style that uses the id selector.