title: CSS import or multiple CSS files
body: <p>I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. </p>
  
  <p>I have created a test page: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
  &lt;head&gt; 
   &lt;title&gt;The Recipe Site&lt;/title&gt;
   &lt;link rel='stylesheet' href='/css/main.css'&gt;
   &lt;link rel='stylesheet' href='/css/site_header.css'&gt;
   &lt;!-- Let google host jQuery for us, maybeb replace with their api --&gt;
   &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="/js/main.js"&gt;&lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
    &lt;div id="site_container"&gt; 
     &lt;div id="site_header"&gt;&lt;?php include_once($r-&gt;base_dir . "inc/site_header.inc.php"); ?&gt;&lt;!-- Include File, Update on ajax request. --&gt;&lt;/div&gt; 
     &lt;div id="site_content"&gt;
      Some main content.
     &lt;/div&gt; 
     &lt;div id="site_footer"&gt;&lt;?php include_once($r-&gt;base_dir . "inc/site_footer.inc.php"); ?&gt;&lt;!-- Include File, Update on ajax request. --&gt;&lt;/div&gt;
    &lt;/div&gt; 
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p><strong>File: /css/main.css</strong></p>
  
  <pre><code>/* Reset Default Padding &amp; Margin */
  * { 
   margin: 0; 
   padding: 0; 
   border: 0; 
  }
  
  
  /* Set Our Float Classes */
  .clear { clear: both; } 
  .right { float: right; } 
  .left { float: left; }
  
  
  /* Setup the main body/site container */
  body { 
   background: url(/images/wallpaper.png) repeat; 
   color: #000000;     
   text-align: center; 
   font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
  } 
  
  #site_container {  
   background-color: #FFFFFF; 
   height: 100%;
   margin-left: auto;  
   margin-right: auto;  
   text-align: left;   
   width: 100%;  
  }
  
  
  /* Some style sheet includes */
  /* @import "/css/site_header.css"; */
  
  
  /* Default Font Sizes */
  h1 { font-size: 2.2em; } 
  h2 { font-size: 2.0em; } 
  h3 { font-size: 1.8em; }
  h4 { font-size: 1.6em; } 
  h5 { font-size: 1.4em; } 
  p { font-size: 1.2em; }
  
  
  /* Default Form Layout */
  input.text { 
   padding: 3px; 
   border: 1px solid #999999;     
  }
  
  
  /* Default Table Reset */
  table {  
   border-spacing: 0; 
   border-collapse: collapse; 
  } 
  
  td{ 
   text-align: left; 
   font-weight: normal; 
  }
  
  
  /* Cause not all browsers know what HTML5 is... */
  header { display:block;}
  footer { display:block;}
  </code></pre>
  
  <p><strong>and now the file: /css/site_header.css:</strong></p>
  
  <pre><code>#site_header {
   background-color: #c0c0c0;
   height: 100px;
   position: absolute;
   top: 100px;
   width: 100%;
  }
  </code></pre>
  
  <p>Problem:</p>
  
  <p>When I use the above code, the site_header div does not have any formatting/background. 
  When I remove the link line from the HTML doc for site_header.css and instead use an @import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div. </p>
  
  <p>Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...</p>
  
  <p>So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why  it would. </p>