CSS specificity: Tag selector overrides class selector [duplicate]

Question

I'm new to web development and stuck at a problem in CSS. As per CSS specificity, it follows as inline > id selector > class selector > tag selector > browser default but in my case tag selector is override the class selector and I'm not getting the desired output. My HTML and CSS code is

p {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.spring-boot {
  font-family: cursive;
}

<article class="spring-boot">
  <h1>
    Spring Boot
  </h1>
  <p>Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run".</p>

</article>

Bellow is the output: Google Chrome Version 90.0.4430.72 (Official Build) (64-bit) Output

Answer 1

This is because the element you are targeting is a child of the element with the targeted class.

For your intended behavior either move the class to the actual p element .spring-boot or add more accuracy to your class selector, something like this .spring-boot p to target a child of that class.

Answer 2

Read and go through this https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks
Also note that CSS is cascading, that means if you use selectors of similar specificity then the one that you define later on in your css file will take precedence over the previous ruleset you have defined.
Usually, if you have conflicting rulesets, that is when the selectors have equal importance then you would not get the desired output. Check and make sure this isn't the case in your css file.