Hasta ahora has estado moviendo cajas, ajustando tamaños y entendiendo cómo piensa CSS. Muy bien. Muy sólido. Muy... gris.
Pero una web sin color es como una fiesta con las luces apagadas: técnicamente existe, sí, pero nadie quiere quedarse mucho tiempo.
Los colores son una de las herramientas más potentes que tienes en CSS. No solo hacen que algo se vea bonito. También crean contraste, dirigen la mirada y transmiten personalidad.
color no es lo mismo que background-colorAquí está la primera trampa clásica. En CSS hay dos propiedades que la gente principiante suele mezclar:
color cambia el color del textobackground-color cambia el color del fondoMira esto:
El texto se verá blanco y el fondo verde azulado. Dos capas distintas, dos propiedades distintas.
Puedes escribir colores de varias maneras:
red, blue, teal, orange#ff0000rgb(255, 0, 0)De momento vamos a usar nombres, porque estás aprendiendo CSS, no descifrando matrículas alienígenas.
No se trata de poner cosas rojas porque sí. El color sirve para crear jerarquía.
Si un botón destaca, el usuario lo encuentra antes. Si el texto y el fondo tienen buen contraste, se lee mejor. Si toda la página comparte una paleta parecida, se siente más coherente.
En otras palabras: el color no es decoración. Es comunicación visual.
Haz que el elemento con clase .titulo tenga texto blanco y fondo teal.
La web acaba de descubrir que podía tener estilo propio...