title: H1 tag with a class inherits properties of h1
body: <p>Recently I was practicing some basics of CSS and while I was on Class Selectors I found some doubts which are confusing me.</p>
  
  <p>I have declared some style properties of a H1 tag and I also have declared some style properties of a H1 tag with a class. When I viewed the result on my web browser then I found that my H1 tag with a class was inheriting one property of my H1 tag. This is the thing which is confusing. How can a tag with class inherit properties of same tag but without a class. If so then how? And if I don't want to inherit the properties of the other tag then how can I do that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  /*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;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;h1&gt;C.S.S. Class Selector with different tags.&lt;/h1&gt;
  &lt;hr&gt;
  &lt;p&gt;In this example you will see different level of headings with different styles but with same class.&lt;/p&gt;
  &lt;h1 class="class1"&gt;
  I am a H1 heading and I have class1 as a class.
  &lt;/h1&gt;
  &lt;h2 class="class1"&gt;
  I am a H2 heading and I also have class1 as a class.
  &lt;/h2&gt;
  &lt;h3 class="class1"&gt;
  I am a H3 heading and I also have class1 as a class.
  &lt;/h3&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>