CSS style hierarchy
Tags: tutorial, beginners, css, html
Published: 2019-12-07 12:14:50

I am a codeNewBie who has started learning HTML, CSS and JavaScript since October 2019 and have completed the "Basic CSS" course from [freecodecamp](https://www.freecodecamp.org/suborna) very recently. Learning CSS has been an amazing journey so far power but the power of classes and IDs and who overrides whom still remained confusing to me, hence I have decided to write this post to allow myself and you to understand the hierarchy a little better and in-depth using scenarios. 


# **Override hierarchy** 

There are many ways we can style our html element tags using CSS. We can override style rules by using different type of selectors. Below is a demonstration of which CSS selector has precedence over other css selectors: 

##### **SCENARIO 1**
```html
<h1>
    Cat Shop
</h1>
```

``` css
body {
    color: green;
} 
```
> **Output:** Cat Shop is green. </br>
> **Reason:** Because we have assigned the color `green` to the body element. 

##### **SCENARIO 2**
```html
<h1>
    Cat Shop
</h1>
```

``` css
body {
    color: green;
} 
h1 {
    color: red;
}
```
> **Output:** Cat shop is red. </br>
> **Reason:** Even though our parent container element `body` sets the color to be green, we are overriding the parent style rule with child element selector.

##### **SCENARIO 3**

```html
<h1 class="blue-text">
    Cat Shop
</h1>
```

```css
body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
```

> **Output:** Cat Shop is blue.
> **Reason:** A class can override the style rule set through the element selector.

##### **SCENARIO 4**

```html
<h1 class="blue-text pink-text">
    Cat Shop
</h1>
```

```css
body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
.pink-text {
    color: pink;
}
```

>**Output:** Cat Shop is pink.
>**Reason:** The order of the classes listed inside the `<h1>` element is irrelevant. However, in CSS, the second declaration will always override the first declaration because browsers always read CSS from top to bottom in order of their declaration. Since `pink-text` is below the `blue-text`, the text of Cat Shop changed to Pink. 

##### **SCENARIO 5**

```html
<h1 id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>
```

```css
body {
    color: green;
}
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
#orange-text {
    color: orange;
}
.pink-text {
    color: pink;
}
```

> **Output:** Cat Shop is orange.
> **Reason:** ID selector always takes precedence over class selector regardless of whether it was declared above or below the class style. 

##### **SCENARIO 6**

``` html
<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>
```

> **Output:** Cat Shop is black.
> **Reason:** Notice how we added `style="color: black;"` to our `h1` element. Inline HTML style attribute overrides the element, class and the ID selectors altogether.

##### **SCENARIO 7**

``` html
<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>
```

```css
body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue !important;
}
#orange-text {
    color: orange;
}
.pink-text {
    color: pink;
}
```

> **Output:** Cat Shop is blue.
> **Reason:** `!important` is the most powerful of all. So when you absolutely need to be sure that an element has specific CSS, you can use `!important` which overrides all of `element, class, ID selectors` and `inline style attribute.` Using `!important` should be last resort when attempting to override a previously defined style rule.

</section>

I hope the scenarios were helpful to you and if you have suggestions regarding other scenarios please let me know in the comment. Also like I mentioned before I am very new to programming as as well writing blog posts, so if any mistakes were found please feel free to correct me. Thank you for reading!