Imagina que HTML es el esqueleto de un edificio: vigas, columnas, paredes. Funcional, sólido... pero frío. Nadie querría vivir en un edificio de hormigón desnudo sin pintura, sin ventanas con estilo, sin jardín.
Ahí es exactamente donde entra CSS (Cascading Style Sheets), el lenguaje que transforma ese esqueleto gris en algo que te deja sin aliento.
CSS es el único lenguaje de la web que, si lo eliminas, el sitio sigue funcionando — pero nadie querría usarlo. Es el maquillaje, el diseño de interiores, la identidad visual de todo lo que ves en internet. Sin CSS, la web sería un mar de texto negro sobre fondo blanco. Aburrido, ¿verdad?
Al igual que HTML, CSS no es un lenguaje de programación. Es un lenguaje de estilos — su único propósito es decirle al navegador cómo deben verse las cosas.
Hay tres formas de añadir CSS a una página. La primera, la más directa (aunque no la más elegante), es usando el atributo style directamente dentro de una etiqueta HTML.
Prueba esto en el editor:
¿Lo ves? El título ahora tiene un fondo rojo. Acabas de escribir tu primer CSS.
Pero aquí viene el giro inesperado: lo que acabas de escribir tiene una estructura muy precisa, y conocerla lo cambia todo.
Dentro del atributo style escribiste esto: background-color: red;
Eso se llama una declaración CSS, y tiene dos partes:
background-color — ¿qué quiero cambiar?red — ¿a qué lo quiero cambiar?Siempre van separadas por dos puntos :, y cada declaración termina obligatoriamente con un punto y coma ;. Es como una oración en el idioma del diseño: "fondo-color: rojo".
Puedes encadenar varias declaraciones una tras otra dentro del mismo atributo style:
Buena pregunta. Imagina que tienes 50 títulos en tu página y quieres cambiarlos todos a azul. Con el atributo style tendrías que modificar cada uno de ellos, uno por uno. Eso es una pesadilla de mantenimiento.
Por eso existen otras dos formas de añadir CSS — más poderosas, más organizadas. Las descubrirás en las próximas lecciones.
Dale al <h1> en el editor un color de fondo azul usando el atributo style.
El esqueleto empieza a cobrar vida...