Bordes para el resto de capas

Bueno, ahora que vemos que esto del borde funciona, vamos a ponerle borde a otras capas, recordando por supuesto la regla anterior que decía... "Si la capa tiene definida una cantidad numérica para el width, no podemos definirle el borde o se deformará la capa un poco".

Ahora vamos a ir colocando bordes a varias de las capas de la plantilla, teniendo en cuenta que cuando tenemos una capa encima de otra, si le ponemos un borde inferior a la de arriba, no será necesario ponerle borde superior a la de abajo (pues le vale el borde inferior de la de encima... se entiende esto?...).

A la capa o div llamada navegacion le vamos a poner borde por lo cuatro costados (por arriba, abajo, izquierda y derecha), que como ya sabemos, se hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-general.css:

border: black 1px solid

quedando esa línea así en la Hoja de Estilo:

navegacion {background-color:gray; border:black 1px solid;}

Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos aparecería un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa navegacion más otro pixel definido para la capa cabecera). Por tanto y para no tener unos bordes más gruesos que otros, a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados. Esto, como ya sabes, se hace así:

#cabecera {background-color:pink; border-left:black 1px solid;
border-right:black 1px solid; border-top:black 1px solid;}

Ahora vamos con la capa pie. Vamos a definirle un borde por los cuatro costados de este modo:

#pie {background-color:brown; border:black 1px solid;}

Y con esto quedan todas la capas bordeadas. Ya sabes usar los bordes y la página tiene mejor pinta. En adelante la mejoraremos aún más hasta que quede totalmente profesional...