title: The order of the link element (for external css) and the internal css shouldn't matter, should they?
body: <p>I know that if we use internal css and external css at the same time (on the same selector) then the internal style should take higher priority and overwrites the external style. However, I ran into a problem here and couldn't figure out why.</p>
  
  <p>I have following style definition in the head element:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;style type="text/css"&gt;
      h2 {font-family: verdana; color: red;}
  &lt;/style&gt;enter code here
  </code></pre>
  
  <p>In styles.css I have </p>
  
  <pre><code>h2 {color: blue;}
  </code></pre>
  
  <p>Then the styles work as they should -- the h2 element is in red.</p>
  
  <p>But if I put the link element after the internal styles:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      h2 {font-family: verdana; color: red;}
  &lt;/style&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
  </code></pre>
  
  <p>then the cascading rule is not working anymore -- the h2 is blue instead of red, which means external style now has higher priority than the internal one.</p>
  
  <p>It doesn't make sense but I couldn't figure out why. Could anyone enlighten me on this? TIA.</p>