CSS import or multiple CSS files

Posted by David H on Stack Overflow See other posts from Stack Overflow or by David H
Published on 2010-03-25T19:41:03Z Indexed on 2010/03/25 19:43 UTC
Read the original article Hit count: 1520

Filed under:

css

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.

I have created a test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>The Recipe Site</title>
    <link rel='stylesheet' href='/css/main.css'>
    <link rel='stylesheet' href='/css/site_header.css'>
    <!-- Let google host jQuery for us, maybeb replace with their api -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/main.js"></script> 
</head> 
<body> 
        <div id="site_container"> 
            <div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div> 
            <div id="site_content">
                Some main content.
            </div>  
            <div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
        </div> 
</body> 
</html>

File: /css/main.css

/* Reset Default Padding & 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;}

and now the file: /css/site_header.css:

site_header {

background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;

}

Problem:

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.

Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...

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.

Developer IT