Creamos un documento CSS y le ponemos este código adentro:

body{
background-color:#EEEEEE;
background-image:url(../images/jpg/background.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contenedor{
width:600px;
margin:auto;
}
#header{
width:600px;
height:100px;
background-color:#009900;
background-image:url(../images/jpg/header.jpg);
}
#logo{
padding-top:10px;
}
#menu{
width:600px;
background:#E3E3E3;
text-align:center;
border-bottom:3px solid #666666;
border-top:1px solid #666666;
}
 #menu ul{
 padding:0px;
 margin:0px;
 list-style:none;
 }
 #menu li{
 line-height:20px;
 display:inline;
 }
 #menu li a{
 padding:0 10px 0 10px;
 color:#990000;
 text-decoration:none;
 }
 #menu li a:hover{
 padding:0 10px 0 10px;
 color:#333333;
 text-decoration:none;
 background-color:#96B951;
 }
#contenido{
border-left:1px solid #666666;
border-right:1px solid #666666;
padding:2px;
}
#footer{
width:600px;
height:20px;
background-color:#009900;
background-image:url(../images/jpg/footer.jpg);
color:#FFFFFF;
text-align:center;
border-top:1px solid #666666;
}

Si se pudieron percatar todos los elementos que tienen el símbolo de número (#) delante son las capas que pusimos en el documento HTML y lo que se encierra dentro de las llaves {} son sus propiedades. Ahora vamos a explicar paso a paso que hicimos:

body{
background-color:#EEEEEE;
background-image:url(../images/jpg/background.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

Aquí le estamos asignando a toda la página el color de fondo con la propiedad background-color, además de que tenga de fondo una imagen con la propiedad background-image, que la fuente que se emplea en el sitio sea Arial y que su tamaño sea de 12px. ¿Fácil no?

#contenedor{
width:600px;
margin:auto;
}

Ahora le damos las propiedades a la capa contenedor, primero le asigno de ancho 600px con la propiedad width y luego pongo que tenga un margen automático con la propiedad margin, ¿Para qué? Pues para que la página web se muestre en el centro de la ventana y no a la izquierda, de esta forma la capa se ajusta automáticamente.

 

#header{
width:600px;
height:100px;
background-color:#009900;
background-image:url(../images/jpg/header.jpg);
}
#logo{
padding-top:10px;
}

Bueno en este caso la propiedad width ya la vimos, ahora le asignamos el alto al elemento con la propiedad height y a la capa de logo le asigno un relleno superior de 10px. Una aclaración, esto se podría hacer también con la propiedad margin, pero Firefox e Internet Explorer no lo ven de la misma forma, así que para que quede igual en ambos navegadores utilizo padding.