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