Im going to make this as simple as possible. Where moving on to the stylesheet.Remember not good at explaining i try to explain the best i can.
So when i start off with my style sheet i go in order with:
body { background-color:#333; font-family:'arial'; }
background: url(pic.png) repeat; if you want it to repeat. you can add x or y for other ways you can mess with that if you want.
Background-color:#000; - you can add a color if you want. There are some color wheels you can find on google incase you don't have photoshop.
Overflow: hidden; you can add this if you want a scroller or a hidden one. if you want to add a scroller no-hidden you would add that but you can look that up to make sure.
font-family:'arial'; is the correct way to type it in. you can browse internet fonts on google to look up other fonts incase u don't want to use arial.Be creative and use something else if you want.
text-align: center; - To center your words or you can use "left", "right" depending what you want the words to go to.
font-size:10px; - you can make it big or small. It all depends what you want to do on your end.
color:#fff; you can add different colors for your font. Look on color wheel or your program for the number to use. I wouldnt use words like "pink" or "green" cause it might not be the color you want. There standerd colors that no one really want to use so its better to you #fff or what ever color you like.
margin:0px; it just moves things over and levels it to make it look good . i would suggest you mess with the numbers and use a program to see what exactly it does cause its hard to explain. you could use auto, or 0 auto; or 0px auto; if you dont want to mess with it and it will move the way it should be.
Padding: 0px; you really dont need to use this if you dont want to but you can add it, its like margin imo.
I suggest to look up on google what else you can add on the body part there is so much you can add this will take care of all your whole background stuff.

Now moving on to #container:
#container { width:900px; height:auto; border:1px solid #eee; background-color:#f7f7f7; margin: 22 auto; padding:5px; }
width:900px; - can be any size you want your whole layout to be.
height: auto; - you can either enter a number 800px; for example or you can not use this. Or just put auto and it will adjest the height.. its up to you, you can also just mess around it.
border: 1px solid #eee; this is a border around the whole layout if you want to use one. 1px is a border around the layout you can add more numbers or just leave it at 1px. again mess around with numbers to see what you like. oh and solid, dotted and theres more you can also look what others you can do with the border you can make it look different i just use solid always.oh and ofcourse don't forget to add a color for the border..anyting of your choice.
background-color:#f7f7f7; this goes of your layout. use a color or dont its up to you.
Margin and padding, was expained at the top.

Now moving on to #header:
#header{ background-image: url('header.png'); width:900px; height:200px; border:1px solid #eee; background-color:#f7f7f7; padding:4px; float:left; }
Everything what i said is explained above what each thing does. This is going to take care of the area of the "header" you can be creative and make your own header on you psp or whatever program you use. this is just basic. Nothing special just everyone has something like this.

So we moving down to #content:
#content { position:relative; border:1px solid #eee; background-color:#f7f7f7; width:490px; height:auto; margin-top:5px; padding:4px; float:right; }
The only thing thats different and not mention is the Position: relative you can add
static
relative
fixed
absolute
sticky
I would suggest that you mess around with any one of them to see exactly what they do for your layout. if you dont mess with stuff then you will never learn imo.
This is another box that will be set on two sides as you can see one is on the left and one is on the right.
#sidebar{ position:relative; width:200px; height:auto; padding:2px; float:left; } #sidebar2{ position:relative; width:200px; height:auto; padding:2px; float:right; }
You also can make the width smaller i just added 200px. but you can easily change that and put whatever you wish.
This is a another box added i know its probably getting confusing after this like wth. but this puts another box around your words to make it nicer you dont have to use this is you dont want to but its going to look odd if this is not added but you can mess with it and see what works for you..
#box{ border:1px solid #eee; background-color:#f7f7f7; text-align:justify; padding:2px; font-size:9px; width:196px; height:auto; margin-top:3px; }
Other parts coming soon! going to stop here its getting cold and chair is not that very comfortable.
Page 3