2b. Specificity in CSS

CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.
It is a value or weight assigned to a CSS selector. The higher the specificity, the more precedence the selector has.

Let's consider the following code

<html>
<head>
    <style>
        *{
            color: gray;
        }
        [[title]]{
            color: red;
        }
        .h1{
            color: blue;
        }
        h1{
            color: pink;
        }
    </style>

</head>
<body>
    <h1 id="title" class="h1" style="color:purple">CodeWithHarry</h1>
</body>
</html>

Here the question is, what color will h1 be assigned to?
This is calculated based on the selector's components.

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.
The cascade algorithm has 4 distinct stages.
1. Position and order of appearance: the order in which your CSS rules appear
2. Specificity: an algorithm that determines which CSS selector has the strongest match
3. 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. Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type

Lets look into all these one by one.

Effect of Position

There are two rules that have selectors of identical specificity, the last one to be declared won. In an HTML page, you can add styles in different ways:
1. Through a <link> tag, a <style> tag, or
2. Directly in the element's style attribute.
If you have one <link> tag at the top of your page and another at the bottom, the styles from the bottom one will be used. The same goes for <style> tags; the ones lower down on the page take priority.
An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.
If the browser doesn't support a property, it is ignored!

Specificity

CSS specificity determines which style rules get applied to an element when there are conflicts.
Higher specificity means the style will be used. It's calculated based on a point system involving inline styles, IDs, classes, and tag names.

Inline Styles

Inline styles have the highest specificity and will always override styles if other selector(s) are also defined.

<html>
<head>
    <style>
        *{
            color: gray;
        }
        
        [[title]]{
            color: red;
        }
        
        .h1{
            color: blue;
        }
        
        h1{
            color: pink;
        }
    </style>

</head>
<body>
    <h1 id="title" class="h1" style="color:purple">CodeWithHarry</h1>
</body>
</html>