Menu
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.
621
A site with only a few pages likely only needs one CSS file. Even if it has a few pages with different template, as long as those templates are fairly similar it can be all rolled together. Even sites with hundreds or thousands of pages can often get away with a single CSS file if the pages are largely the same.
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.
Yes, you can apply more than one stylesheet to an HTML file. For each stylesheet you link to a page, you would just need to add an additional <link> element.
Yes, always use @import ! It works GREAT as a modern solution to using CSS.
The @import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any @import rules must precede all other rules (except the @charset rule, if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each @import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
