Aplicando Más Propiedades

Antes de nada...

Para poder ver bien los ejemplos es importante que cuando los abramos sepamos donde empieza una capa y donde termina, y esto no podemos verlo a menos que por ejemplo le demos un color de fondo a cada una de esas capas. Además, viene bien ponerle otro color de fondo a la web en sí para destacar más los límites de esas capas y entender bien lo que explico después. Así que ahora mismo le vamos a poner un color de fondo amarillo a la web. Esto se hace añadiendo una línea a la hoja de estilo, que debe quedar así:

body {background-color:yellow}
#global {background-color:#FF9900}
#bartolo {background-color:#00CC00}
#catalina {background-color:#00CCFF}

Además de poner los colores en forma hexagesimal, se pueden definir otros colores directamente por su nombre en inglés, como hemos hecho con el amarillo (yellow) del body.

Como recuerdas, body engloba todo el contenido de la web, de modo que con esto todo tendrá un color de fondo amarillo y veremos mejor cada capa que tiene un color de fondo distinto. Así que tendremos un fondo amarillo con tres capas, una global naranja que contiene otras dos, bartolo arriba y catalina abajo. Mira, este es el resultado.

Aplicando la propiedad border:

Como aún no es suficiente para ver los límites de cada capa vamos a dibujarle un borde a todas ellas. Así aprendemos ya de paso a poner bordes, no? Basta con añadir a la hoja de estilo lo siguiente:

body {background-color:yellow}
#global {background-color:#FF9900; border:#000 1px solid}
#bartolo {background-color:#00CC00; border:#000 1px solid}
#catalina {background-color:#00CCFF; border:#000 1px solid}

Hemos escrito border:#000 1px solid, donde #000 es el color, en este caso negro, 1px es el grosor o espesor de la línea de borde (un pixel) y solid significa que es una línea continua. Por el momento déjalo así, ya podrás hacer experimentos por tu cuenta otro día. Es para que no te lies pues seguiremos con ese estilo a lo largo del ejemplo.

Bien, el resultado lo puedes ver tú mismo si lo haces (deberias hacerlo para ir siguiendo estas lecciones...) pero por si acaso, se ve este resultado. No vemos el color naranja de global pues bartolo y catalina están ocupando todo su espacio, están sobre global y lo tapan.