<!-- Home|Web Hosting/Design ->
<!--CSS 101.2-->

What did we just do?

Staying with the flow of this website. I gave you the end result first! That way those of you who just wanted the template can stop there and those who wish to learn a little can keep going.
Ok, let's take a look at the CSS you saved to your hard drive named stylecss.css:

/* CSS Document */
body {
background-color: #c0c0c0;
}
.title
{
padding-left:80px; font-size:24px; padding-top:25px
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
ul {
margin: 0;
padding: 0 0 10px 0;
list-style: none;
line-height: 1.2em;
}
li {
padding-bottom: 7px;
}
a:link {
color: #333333;
text-decoration: none;font-weight:bold
}
a:visited {
text-decoration: none;
color: #333333;font-weight:bold
}
a:hover {
text-decoration: none;
color: #990000;font-weight:bold
}
a:active {
text-decoration: none;
color: #993300;font-weight:bold
}
#header {
width: 755px;
height: 71px;
color:#4d5863;
background: #D8DDE1 url("images/header.jpg") no-repeat;
margin: 0px auto;
}
#container {
position: relative;
width: 755px;
color:inherit;
background: #D8DDE1 url("images/body.jpg") repeat-y;
margin: 0 auto;
text-align: left;
min-height: 400px; /*ADDED FOR IE8*/
}
#content {
line-height: 1.6em;
float: right;
width: 550px;
padding: 0px 0px;
}
div.paragraph {
margin: 10px 35px 50px 0px;
padding: 0;
}
/* NAVIGATION STYLES */
#navlist {
font-size: 0.85em;
float: left;
width: 160px;
padding-left: 30px;
}
#navlist ul {
margin-right: 10px;
margin-left: 10px;
}
#navlist ul li {
display:block;
margin: 2px 0;
}
/* CATEGORY NAVIGATION */
#nav-1 ul {
padding-bottom: 20px;
}
#nav-1 a:link, #nav-topics a:visited {
color: #000000;
background-color:inherit;
}
#nav-1 h3 {
padding-left: 10px;
}
#nav-1 li {
color: #AC4444;
background: url("images/nav_bg.gif") repeat-x left bottom;
background-color:inherit;
}
#nav-1 a:hover, #nav-topics a:active {
color: #6A0909;
background-color:inherit;
}
#footer {
margin: 0 auto;
width: 755px;
height: 33px;
background: url("images/footer.jpg") no-repeat;
}

CSS 101 <-- previous     next --> CSS 101.3

"Courage is the mastery of fear, not the absence of fear."- Mark Twain