Dale estilo a una página pequeña

La página de la panadería del curso de HTML toma sus colores, espacios y maquetación de unas 40 líneas de CSS, y el HTML no cambia en absoluto.

Empieza por las decisiones, no por las reglas

Antes de escribir reglas, toma unas cuantas decisiones: un color de acento, un color de texto y un fondo con suficiente contraste, una lista de fuentes, un tamaño base y un paso de espaciado que se repita en todas partes (por ejemplo 8, 16 y 24 píxeles). Una página que reutiliza pocos valores se ve tranquila e intencional; una página donde cada caja tiene su propio margen un poco distinto se ve desordenada aunque nadie sepa decir por qué. CSS tiene una función hecha para esto: las propiedades personalizadas.

Propiedades personalizadas

Una propiedad personalizada es un nombre que tú inventas, que empieza con dos guiones y guarda un valor: --accent: #1a5fb4;. Define tus decisiones una vez en :root, que es el elemento html, y úsalas donde quieras con var(): background: var(--accent);. Las propiedades personalizadas se heredan como las propiedades de texto, así que todos los elementos pueden leer las que se definen en la raíz. Ahora, cambiar el color de acento de todo el sitio significa editar una sola línea. También puedes redefinir una propiedad dentro de una media query, por ejemplo para cambiar los colores con prefers-color-scheme: dark.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

Leer la hoja de estilos de arriba abajo

La hoja de estilos de arriba usa algo de casi todas las unidades. La raíz guarda las decisiones. body fija una sola vez la fuente, el interlineado y los colores, y la herencia los lleva a cada párrafo. El encabezado es una fila flex con salto de línea, así que en un celular angosto el menú baja debajo del nombre en lugar de quedar apretado. main tiene un max-width y margin: 0 auto, lo que mantiene las líneas legibles y centra el contenido en pantallas anchas. Las tarjetas usan el patrón de grid con auto-fill, así que se reacomodan de una columna a varias sin media query, y las imágenes son fluidas. El botón recibe un color al pasar el puntero y, igual de importante, un contorno de foco visible para quienes usan el teclado.

Compruébalo en pantallas reales

Probar CSS significa mirar. Abre la página en una ventana angosta (320 píxeles para la prueba de reflujo de WCAG) y en una ancha, y busca desplazamiento lateral y texto que toque los bordes. Haz zoom al 200 por ciento. Recorre la página con Tab y asegúrate de que siempre ves dónde está el foco. Revisa el contraste del texto y de los botones en las herramientas para desarrolladores. Activa el modo oscuro o la opción de reducir movimiento de tu sistema si les diste estilo. Las herramientas para desarrolladores del navegador te permiten cambiar cualquier valor en vivo y ver el modelo de caja de cualquier elemento, que es la forma más rápida de responder por qué algo está donde está.

A partir de aquí, las mismas piezas sirven para cualquier sitio. Los proyectos más grandes dividen la hoja de estilos en archivos, nombran las clases según lo que es un componente (tarjeta, botón, encabezado del sitio) y mantienen una lista corta de propiedades personalizadas compartidas, pero las reglas de fondo son las de estas nueve unidades.