Reduce CSS files
Posted: Sun Feb 13, 2005 5:21 pm
I have reduced my CSS down to one file thanks to the information from here. Great idea, putting an id tag on the body element then using the Cascading effect of CSS for each page you want different.
Example: I put an id="blue" in the body tag of one of my templates and an id="green" in another template, then added this to my common css file.
(sample only)
Example: I put an id="blue" in the body tag of one of my templates and an id="green" in another template, then added this to my common css file.
(sample only)
Code: Select all
#blue #container {
background-color: #036;
}
#blue #leftnav {
background-color: #76A3CB;
border: 1px solid #111;
}
#blue #mcontent {
border: medium double #534137;
background-color: #AEC6DE;
}
#blue #footer {
background-image: url(images/barb.jpg);
color: #FFE4C4;
}
#green #container {
background-color: #8FBC8F;
background-image: url(images/grnstone.jpg);
}
#green #leftnav {
background-color: #99B49C;
border: 1px solid #111;
}
#green #mcontent {
border: medium double #534137;
background-color: #C4D9C4;
}
#green #footer {
background-image: url(images/barg.jpg);
color: #FFE4C4;
}