title: Internal Stylesheet NOT overriding External stylesheet?
body: <p>I'm trying to add some custom styles to a few tags but finding it difficult to override the external CSS file. Adding styles inline seems to work fine, but using an internal page stylesheet is not working out. Tags are still using external styles.</p>
  
  <p>For example, this is not working</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
  
  &lt;style type="text/css"&gt;
  
      h1 {
          font-size:36px;
      }
  
    &lt;/style&gt;
  </code></pre>
  
  <p>I even tried creating a custom style</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
      h1.heading {
              font-size:36px;
          }
  
   &lt;/style&gt;
  </code></pre>
  
  <p>And there is no change.</p>
  
  <p><a href="http://jsfiddle.net/monmart/p2M7r/" rel="nofollow">This JSFiddle</a> demonstrates the problem.</p>