I want to use multiple CSS files - html

Question

I have 2 css files:
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/day/style.css" rel="stylesheet" type="text/css">
main.css
#MainHeader
{
position:absolute; top:0; left:0; right:0;
width:100%;
height:300px;
}
#ContentContainor
{
width: 80%;
position:absolute;
top: 350px;
left: 10%;
}
style.css
#MainHeader
{
background:green;
}
#ContentContainor
{
background: yellow;
}
I want one to position the site: main.css and the other is a user chosen style style.css.
The main.css works correctly but the style.css dosn't seem to be working.
I'll be honest I don't know if this is even possible; I'm experimenting.
If some one has a solution please comment.

Answer 1

What you're stating is absolutely possible.
Let's say you have two stylesheets, as you mentioned:
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/day/style.css" rel="stylesheet" type="text/css">
The main.css will hold your structural (position, dimensions, etc) CSS, and the day/style.css will hold your design (color, animations, etc) CSS.
If your css/main.css has the following CSS:
#main_header {
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:300px;
}
#content_container{
width: 80%;
position:absolute;
top: 350px;
left: 10%;
}
you can append styles (in css/day/style.css) as follows:
#main_header {
background-color: #00F;
}
#content_container{
color: #F00;
background-color: #0F0;
}
you can also override and 'lock' styles (in css/day/style.css) as follows:
#main_header {
height: 200px; /* override */
}
#content_container{
position: relative !important; /* override and 'lock' */
}
As a last note, you want to make sure your CSS files are being loaded and that your HTML is correctly formatted. Use your browsers Developer Tool / Firebug to make sure that the CSS is being loaded. For example, in Chrome, clicking on the Developer Tool (F12) tab called Network and reloading the page will tell you whether files are being loaded ok (200/304) or whether there are issues (ie, 404, 403, 500, etc)