Avanzando en Divs Parte 3

Seguimos estudiando el código en esta tercera entrega que aunque trata de Divs y estilos CSS como veremos aprenderemos mucho más.

Ahora estudiamos el div llamado:

cabecera.  Este div como vemos se encuentra dentro del div contenedor y nos muestra un texto dentro de una etiqueta de párrafo <p>

dispone de un id llamado cabecera por lo que se presupone que tiene un estilo css asociado que mostramos aquí:

Comentamos lo que le asignamos:

color. se refiere al color de texto que incluyamos dentro y en nuestro caso representa el color hexadecimal #FFFF60 que es un amarillo aunque CSS admite resumir los códigos de color.

background-color. se refiere al color de fondo del div y en este caso es negro

padding. Es un espacio de relleno entre el borde un objeto y su interior y se puede usar la orden padding con un solo valor para poner todo igual o especificar cada uno de ellos. E incluso mas posibilidades. Puede probar a cambiar los valores por ejemplo el de la izquierda y vea como el texto CDEI …. se empuja.

En nuestro caso hemos usado todos los paddings menos el right.

Si observa el código verá que el texto de cabecera está encerrado en una etiqueta de párrafo <p> y si observa los estilos verá un estilo de etiqueta que afectará a todos los párrafos.

Los cambios en este estilo afectan no solo al texto de la cabecera sino también al texto de los párrafos que hay en el div contenido.

Además imagine que a la etiqueta párrafo le pone un color de texto blanco (#fff) veremos que cambiará el color de texto que hay dentro de cabecera y el color que pusimos en su estilo (amarillo) no será usado ahí. Eso es el sentido de los estilos en cascada ya que los mas interiores tienen prioridad sobre los exteriores.

El div cabecera no tiene ancho ni alto, el ancho lo hereda del contenedor y el alto lo toma del contenido y de las demás etiquetas que lo afecten.

Aquí termina la sesión que próximamente verá su continuación