title: Moving in-page CSS to external file
body: <p>When I put the CSS below in-line, in the head section of HTML document, everything seems to work fine. However, when I move the CSS to an external file, it does not work as it did when inline.</p>
  
  <p>My question is, when I move the CSS code to an external file, do I need to change anything? Why does it not work in the same way as when it is in the HTML head?</p>
  
  <p>Any suggestion for me? Thanks for all the help...</p>
  
  <p>My menu CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .red #slatenav {
          position:relative;
          display:block;
          height:42px;
          font-size:15px;
          font-weight:bold;
          background:transparent url(MyImages/MenuLine.jpg) repeat-x top left;
          font-family: Calibri;
      }
      .red #slatenav ul {
          margin:0px;
          padding:0;
          list-style-type:none;
          width:auto;
      }
      .red #slatenav ul li {
          display:block;
          float:left;
          margin:0 1px 0 0;
      }
      .red #slatenav ul li a {
          display:block;
          float:left;
          color:#fff;
          text-decoration:none;
          padding:12px 28px 0 28px;
          height:28px;
          border: 1px #606060 solid;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>My menu HTML</p>
  
  <pre><code>&lt;div class="red"&gt;
      &lt;div id="slatenav"&gt;
          &lt;ul&gt;
              &lt;li id="Home"&gt;&lt;a href="#" title="css menus"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="css menus"&gt;About Us&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="css menus"&gt;Solutions&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="css menus"&gt;Services&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="css menus"&gt;Technical Support&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/3wJfx/" rel="nofollow">http://jsfiddle.net/3wJfx/</a></p>