Have you ever applied a CSS rule on an element and you didn't see any changes? yeah! we all have. CSS means Cascading Stylesheet right... but what do Cascade actually means? Cascade here means the last rule among two or more rules is applied to an element. Take a look at the code below

<p> hello friends</p>

          p{
            color: blue;
              }

           p{
           color: red;
            }

which of the CSS styles do you think will be applied to the HTML element? According to Cascading, the last style p{color:red} will be applied.
But what happens when the last CSS style is not applied? look at the code

     <h1 class="heading"> First heading </h1>

       .heading{
          color: black;
        }

       h1{
       color: grey;
       }

when you run this code on your browser, the black color will be applied to h1 element instead of grey color which is obviously the last CSS style. This brings us to another concept called Specificity which works hand-in-hand with Cascade . Specificity is the way the browser decides which CSS style is applied to an element when more than one styles is declared.

In most musical concert, tickets are sold in different categories like vvip, vip, & regular at different price values. During the events, vvip & vip tickets holders are given more special and preferential treatments than regular tickets holders. It's the same in CSS ,when two or more conflicting rules point to the same element, the browser chooses which rule is applied based on it specificity value.

ID selector (#) has a value of 100

class selector(.) = 10

html selector = 1

In the previous example the h1 is styled black because the class selector (heading) value which is 10 is greater than the html selector (h1) value which is 1 and so the browser applied the style with the higher specificity value.
Therefore higher value = higher specificity = most likely style to be used by the browser.

Here is a little exercise for you; look at the following codes, which of the CSS rules will be applied to the h1 element? drop your answer at the comment do not run the code on your browser.

<h1  id="heading">This is my first article</h1>

    h1{
    color: pink:
    }

   #heading{
   color :grey;
    }

question 2

<p> hello Hashnode</p>

p{
color : blue;
}

p{
color: red;
}