Okay, CSS is really simple;
If you take a look it’s just:
[definition] {
“algorithm”
}
The body is essentially defining what the tags will eventually do.
So if we had: $style = “black”;
It would go search for the black template, and you’d end up with something like this:
font-family: “trebuchet ms”;
font-size: 14px;
text-decoration: underline;
border-top-color: #AAAAAA;
border-bottom-color: #AAAAAA;
letter-spacing: 5px;
}
.title2 {
font-family: “trebuchet ms”;
font-size: 14px;
text-decoration: underline;
letter-spacing: 3px;
text-align:center;
}
a:link, a:visited, a:active {
font-family: “trebuchet ms”;
font-size: 11px;
font-weight: 140;
text-decoration: none;
color: #000000;
}
a:hover {
font-family: “trebuchet ms”;
font-size: 11px;
font-weight: 140;
text-decoration: none;
color: #000000;
}
INPUT{
font-size:10pt;
font-family: “trebuchet ms”;
font-weight: bold;
color: #FFFFFF;
background-image: url(‘footer.gif’);
}
/*layout*/
body {
margin: 0;
padding: 0;
text-align: center;
color: #000000;
font-family: trebuchet ms;
font-size: 12px;
border: none;
background-repeat: repeat-x-x
}
.thrColFixHdr #container {
width: 745px;
background: #FFFFFF;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 3px;
top: 100px;
border: 1px solid #000000;
opacity: 0.90;
}
.thrColFixHdr #header {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: 1px solid #000000;
width: 715px;
}
.thrColFixHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColFixHdr #topnav {
float: top;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 100%;
}
.thrColFixHdr #bottomfloat {
float: bottom;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 100%;
}
.thrColFixHdr #mainContent {
width: 360px;
margin-top: 0;
margin-right: 200px;
margin-bottom: 0;
margin-left: 160px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.thrColFixHdr #footer {
border: 1px solid #000000;
background-repeat: repeat-x-x;
color: #FFFFFF;
padding-left:20px;
padding-right:10px;
padding-top:0;
padding-bottom:0
}
.thrColFixHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
image01= new Image()
image01.src=”image/background.gif”
image02= new Image()
image02.src=”image/background.gif”
function rollover(imagename, newsrc){
document.images[imagename].src=newsrc.src
}
So if you had a header, footer, and navigation, those would be defined by that. The body will have a central CSS in which everything will refer to it.