Dominando CSS: Cómo dar vida a tu HTML con colores

En el siguiente código en CSS, rellene la línea 3 para que el color del texto de la página web sea azul.


Si el HTML es el esqueleto de una página web, el CSS (Cascading Style Sheets) es la piel, la ropa y el estilo. Uno de los primeros desafíos que enfrenta cualquier aspirante a desarrollador web es entender cómo aplicar colores de forma global para crear una identidad visual coherente.

En nuestro último ejercicio práctico, trabajamos sobre un fragmento de código básico que nos enseña una lección fundamental: la selección de elementos raíz.

El Selector body: El punto de partida

Cuando queremos que un estilo afecte a toda nuestra página, el selector más potente es el body. Al aplicar reglas aquí, nos aseguramos de que todos los elementos (párrafos, títulos, listas) hereden esas características, a menos que indiquen lo contrario.

En el reto propuesto, teníamos este escenario:

CSS

body {
    background-color: lightgrey;
    color: blue; /* Línea clave para el texto */
}

¿Por qué color y no text-color?

Es un error común entre principiantes intentar usar propiedades como font-color o text-color. En CSS, la propiedad estándar para cambiar el color de la fuente es simplemente color.

  • background-color: Define el lienzo de fondo (en nuestro caso, un gris claro).
  • color: Define el tono del contenido principal (el texto azul).

El resultado visual

Al combinar estas dos líneas, logramos un contraste inmediato. El fondo gris claro (lightgrey) permite que el azul (blue) resalte sin cansar la vista, cumpliendo con principios básicos de accesibilidad y diseño.

Conclusión

Entender cómo manipular el body es el primer paso para dominar el diseño web responsivo y profesional. Con solo dos líneas de código, hemos transformado una página blanca y aburrida en una con personalidad propia.

¡Sigue practicando y recuerda que en CSS, a veces menos es más!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio