Refer here for basic css help before starting.

quick tips

» Keep your css files in a separate folder in your directory.

» Use comments in your CSS to organize your code. Wrap any text in /* (name of section) */.

» Pay close attention to the positioning of elements. Relative positioning is necessary for centering divs.

» If you ever lose a div or aren't getting what you want, put a bright 1px border aroung it. That way, you'll know exactly what the div is covering, and how tall and wide it is.

» Have fun while you code CSS because now you're officially making the page look pretty!

linking

Make sure you link your css stylesheet properly in the coresponding html document.

<link rel="stylesheet" href="css/main.css" type="text/css" />

CSS is design

Once you start desiging the page with CSS the look of the page can change based on how the elements are working out. Notive how my coding process differs from the design stage. (Below is the first strage of codeing).

right left

CSS

Below is the CSS I used to make my website look how I wanted it to. Use it as a starting point and you can customize it to whatever you want.

This is just the CSS for the main components of the website. Scroll down to see the CSS styling for the accordian feature of the website.

body {
background-color:#00FF66;
padding: 0;
margin: 0;
background-image:url(images/pattern2.gif);
background-repeat:repeat;
font-size: 62.5%
}

#outer-container {
position: relative;
width: 835px;
margin:0 auto;
background-image:url(images/gradient.gif);
}

#container {
position: relative;
width: 800px;
margin:0 auto;
border:5px solid white;
padding: 0;
border-bottom:1px solid #CCC;
padding-bottom: 5px;
}


/*<------------ HEADER ------------>*/
#header {
position: relative;
background-image:url(images/header.jpg);
height:168px;
width: 800px;
padding: 0;
margin: 0;
}

/*<---------- MENU --------->*/
#menu {
position: relative;
background-image:url(images/menu_bckg.gif);
height: 38px;
width: 800px;
padding: 0;
margin: 0;
}

#menu li{
position: relative;
list-style-type: none;
display: block;
}


/*<--------- BODY ----------->*/
#content {
position: relative;
margin: 0;
padding: 0;
}

#accordion p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#666666;
letter-spacing: 0.04em;
}

h2 {
color:#996600;
font-size: 1.1em;
text-transform:uppercase;
padding-left:10px;
letter-spacing: 0.04em;
}

h3 {
color: white;
font-size:36px;
}

/*---- TABLE -----*/
table {
margin-left: 10px;
background-color: #f6f4e4;
}

td {
border-left:1px solid #3399CC;
padding-left:5px;
border-bottom:1px solid #FFF;
}

th {
background-color:#f0e7bd;
text-align: left;
padding: 5px;
text-transform:uppercase;
border-bottom: 1px solid #c2b013;
border-left: 1px solid #c2b013;
color: #072b82;
}

accordian

Below is the CSS I used to make my website look how I wanted it to. You can customize it however you want.

This is what allows the accordian to function properly. It is used alongside with javascript. Go here for the javascript code for this feature.

.toggler {
margin: 0;
height: 1.7em;
padding-top: 0.5em;
border-bottom: 1px solid white;
background-image:url(images/accordian.jpg);
font-size: 1.0em;
font-weight: normal;
text-transform:uppercase;
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}

.element {
background-color:#FFFFFF;
}

.element p {
margin: 0;
padding: 4px;
}

.float-right {
padding:10px 20px;
float:right;
}

h3 {
font-size: 1.1em;
font-weight: normal;
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
padding-left:10px;
}