¿Qué es CSS? Selectores y reglas — CSS: dar estilo

CSS: donde la web se pone guapa

Ya tienes el esqueleto (HTML). Ahora toca vestirlo. CSS (Cascading Style Sheets) es el diseño: colores, tamaños, espaciado, posición. Y lo mejor: todo lo que escribes se ve al instante en la vista previa. Se escribe en reglas.

Anatomía de una regla

h1 {
  color: red;
  font-size: 32px;
}

h1 es el selector: a qué elementos apunta la regla.
Entre llaves van las declaraciones, en pares propiedad: valor;.

Tipos de selector

p            { }   /* por etiqueta: todos los <p> */
.aviso       { }   /* por clase: elementos con class="aviso" */
#cabecera    { }   /* por id: el elemento con id="cabecera" */

Las clases (.) son las reinas: se reutilizan en muchos elementos. ⚠️ Trampa clásica: olvidar el punto en .aviso o la almohadilla en #cabecera. Sin ese símbolo, el selector apunta a otra cosa (o a nada).

En estos ejercicios escribes el CSS y ves el HTML estilizado en la vista previa. Cambia un color y ¡pum!, cambia en pantalla.