#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;
}
Ahora continuamos con el menú de navegación al que le agregamos 3 nuevas propiedades: text-align, border-bottom y border-top. Con la primera propiedad colocamos el texto en el centro de la capa, o sea lo alineamos al centro y con la segunda y la tercera le agregamos un borde inferior de 3px y uno superior de un 1px respectivamente como elemento decorativo.
Nos toca trabajar con las listas que están dentro de la capa menú, es por ello que se escribe #menu ul y #menu li. En el caso del primero le añadimos una propiedad nueva: list-style:none; Con esta propiedad le quitamos el puntito que se ve delante del texto cuando hacemos una lista. En el caso del segundo establecemos dos propiedades nuevas: line-height:20px , display:inline. Esto se utiliza para darle una altura a la línea en el caso del primero de 20px y para que la lista se muestre de forma horizontal, si le quitamos esta propiedad, el menú se verá de forma vertical.
Para el caso del estilo de los enlaces se colocan las propiedades dentro de #menu li a ya que si solamente ponemos a sin #menu li delante las propiedades se le aplicarían a todos los vínculos de nuestra web y solamente queremos darle ciertas características a los vínculos del menú…
Ahora vamos a ver un truco o hack muy útil, en le caso de la etiqueta padding y margin se puede establecer de la siguiente forma:
padding:0 10px 0 10px;
Ya que básicamente sería lo mismo que poner:
Padding-top:0px, padding-right:10px, padding-bottom:0px, padding-left:10px;
Cuando se escribe solamente padding, esta propiedad toma por defecto TOP, BOTTOM, LEFT, RIGHT. O sea si ponemos padding:2px le asigna 2 px de relleno al elemento por la derecha, por la izquierda, por arriba y por debajo.
Con la etiqueta text-decoration, le quitamos o le ponemos al vínculo la línea debajo del texto…
#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;
}
Y ya para terminar le asignamos las propiedades que ya conocemos a la capa del contenido y el footer… Ahora, que sucede, que después que hicimos todo esto y lo guardamos, no pasó absolutamente nada el documento index.html. ¿Por qué? Porque faltó ponerle una línea de código que permite enlazar el HTML y el CSS, sin esta línea elcódigo es totalmente inservible. Abrimos el documento index.html y escribimos dentro la etiquetas <head></head> lo siguiente:
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
Guardamos el documento index.html y he aquí un ejemplo de como quedaría terminado. Y ya tenemos sin más ni menos una sencilla página web. Puede encontrar otros tutoriales aquí.