title: Jquery add css to head
body: <p>I am asynchronously adding a few scripts and style sheets to a project that I am building and would like to keep the style sheets all grouped together in the HEAD.</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;home&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="Shortcut Icon" type="image/ico" href="/img/favicon.png"&gt;
  
    &lt;!-- STYLES--&gt;
    &lt;link rel="stylesheet" href="/css/fonts-and-colors.css" type="text/css" media="screen"&gt; 
    &lt;link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen"&gt;
  
    &lt;!-- JS--&gt;
    &lt;script type="text/javascript" async="" src="/js/light-box.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/js/grade-button.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function() {
          // some code
      });
    &lt;/script&gt;
    &lt;link rel="stylesheet" href="/css/masterBlaster.css" type="text/css" media="screen"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>I am currently using</p>
  
  <pre><code>$("head").append("&lt;link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'&gt;");
  </code></pre>
  
  <p>which works fine, but it adds it to the bottom of my HEAD section as you can see in the example.</p>
  
  <p>The OCD in me would like to add it either before my first style link or after the last style link.</p>
  
  <p>Thanks for looking.</p>