title: Override a css heading with a new style class
body: <p>I am using one of the free web design templates to create my own site. The template uses a css style sheet and defines lots of different styles with similar names. I defined some new styles, but the problem is new styles do not effect to my pages. 
  For example, this is the style for heading2 in one of the blocks:</p>
  
  <pre><code> #body .article h2 {
  color: #ffaf04;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 48px;
  margin: 0;
  padding: 0 48px;
  text-align: center;
      }
  </code></pre>
  
  <p>I try to add and use this style</p>
  
  <pre><code> .eventTitle { font-size:28px; color:black  }
  </code></pre>
  
  <p>but when I use </p>
  
  <pre><code> &lt;h2 class="eventTitle"&gt;something&lt;/h2&gt;
  </code></pre>
  
  <p>style from #body .article is applied not  eventTitle.</p>
  
  <p>I was wondering maybe there is some parenting or protecting of some parent styles in CSS, or maybe some div items has to use some specific class styles or something.</p>
  
  <p>I appreciate all comment and ideas in advance.</p>