title: Why does the order of the link elements in <head> matter?
body: <p>From Code Academy's <a href="http://www.codecademy.com/courses/web-beginner-en-4lw13/0/6?content_from=make-a-website%3Acss-properties-box" rel="nofollow">Make a Website: CSS Styling</a>:</p>
  
  <pre><code>     &lt;head&gt;
           &lt;link href="font.css" rel="stylesheet"&gt;
           &lt;link href="main.css" rel="stylesheet"&gt;   
      &lt;/head&gt;
  </code></pre>
  
  <blockquote>
    <p>"Inside the head element are two link elements. The order of these
    link elements matters.</p>
    
    <blockquote>
      <p>The browser first sees the link for the custom font font.css, and
      makes the font available to use in the page.</p>
      
      <p>Next the browser sees the link for main.css. Since the browser now
      knows about the custom font, we can use it from main.css to style
      elements."</p>
    </blockquote>
  </blockquote>
  
  <p>I want to have an intuition/answer as to why does the order matter (link to fonts before the main CSS stylesheet)?</p>
  
  <p>I tried to do it in the other order (link to main stylesheet before link to fonts) and it still worked.</p>