The Cascade Algorithm

CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. It's the reason that the text of the button styled with the above CSS will be purple.

Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this. The cascade algorithm has 4 distinct stages.

1. Position and order of appearance: the order in which your CSS rules appear
2. Specificity: algorithm that determines which CSS selector has the strongest match
3. Source Order/Origin: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS
4. Selector Specificity: some CSS rules are weighted more heavily than others, especially with the !important rule type

Want to learn more in depth You can go there : Click Me Bro

Specificity Calculation

To calculate specificity, assign a value to each part of the selector:

Want to know more Selectors go there: CSS Selectors

1. Inline styles have the highest specificity (1000)
2. IDs have the next highest specificity (100)
3. Classes Selectors, attributes Selectors, and pseudo-classes have the next specificity (10)
4. Elements Selectors and pseudo-elements have the next specificity (1)
5. Universal Selectors have the loowest specificity (0)

Inline Style > ID Selector > Class or Attribute Selector > Element Selector > Universal Selector

Then, add up the values of all the parts in the selector.

Here is an example

            <h1 id="title" class="h1">CodeWithHarry</h1>
        

Here, the specificity value will be 111 because ID has a specificity of 100, the class has a specificity of 10, and the h1 element has a specificity of 1.

In the case of a specificity tie, the rule that appears last in the CSS is applied.

Importance

The !important flag in CSS is used to give a particular style rule the highest level of importance, overriding any other competing styles. When you add !important to a CSS rule, it will take precedence over other rules affecting the same element, regardless of their specificity. For example, if you have:

            
                    p {
                        color: red !important;
                    }
                
                    p {
                        color: blue;
                    }
            
        

The text in the <p> element will be red, not blue, because the !important flag makes that rule more important.

an !important at the end of a CSS value gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.

However, it's generally best to use !important sparingly, as it can make debugging and maintaining your stylesheets more complicated. It can override styles in ways that are hard to trace, leading to unexpected results.

Quick Quiz

             a.harryclass.rohan-class[href]:hover {
                color: red;
                }
        

Solution

To calculate the specificity value of the selector a.harryclass.rohan-class[href]:hover, you can break down its components:

• Element selectors: a contributes 1 point.
• Class selectors: .harryclass and .rohan-class each contributes 10 points, totaling 20 points.
• Attribute selector: [href] contributes 10 points.
• seudo-class: :hover adds another 10 points.

Add up all these values:

1 (element) + 20 (classes) + 10 (attribute) + 10 (pseudo-class) = 41. So, the specificity value of the selector a.harryclass.rohan-class[href]:hover will be 41.

Inline Styles/Inline Property: Click me Bro

Id Selector Styles: Click me Bro

Class and Attribute Selectors: Click me Bro

Element Selector: Click me Bro

Universal Selector: Click me Bro

!Importance Property: Click me Bro