During my CSS practice, I encountered some confusion regarding Class Selectors. Specifically, I had styled a H1 tag and then applied additional styles to a H1 tag with a class. To my surprise, the H1 tag with a class was inheriting properties from the original H1 tag. This behavior left me perplexed. How can a tagged element inherit properties from another tagged element with the same tag but without a class? Is there a way to prevent this inheritance of styles?
<html>
<head>
<style>
/*styling for h1 tag.*/
h1
{
text-align:center;
color:yellow;
}
h1.class1
{
color:blue;
font-size:30px;
}
h2.class1
{
color:purple;
font-size:25px;
}
h3.class1
{
color:red;
font-size:15px;
}
</style>
<body>
<h1>C.S.S. Class Selector with different tags.</h1>
<hr>
<p>In this example you will see different level of headings with different styles but with same class.</p>
<h1 class="class1">
I am a H1 heading and I have class1 as a class.
</h1>
<h2 class="class1">
I am a H2 heading and I also have class1 as a class.
</h2>
<h3 class="class1">
I am a H3 heading and I also have class1 as a class.
</h3>
</body>
</html>