Aprender CSS: recursos gratis y chuleta básica

Para aprender CSS gratis, los dos sitios por los que yo empezaría son MDN Web Docs, de Mozilla, y el curso Learn CSS de web.dev, de Google. Los dos son gratuitos, están al día y explican el CSS de hoy, con flexbox, grid y variables. Debajo tienes una chuleta con los conceptos básicos para tenerla a mano mientras maquetas.

Dónde aprender CSS gratis

MDN Web Docs es la referencia que yo tendría siempre abierta en una pestaña. Tiene un módulo de iniciación, Bloques de construcción CSS, que recorre la cascada, la especificidad y la herencia, los selectores, el modelo de caja, fondos y bordes, el desbordamiento, los valores y unidades y el tamaño de los elementos, con ejercicios. La versión en español la traduce la comunidad, así que si algo no te cuadra, compárala con la inglesa. Y para cada propiedad tienes su ficha en la referencia de CSS.

Learn CSS de web.dev es un curso por módulos que su web presenta como «evergreen», es decir, que se va actualizando. Empieza por el modelo de caja y los selectores, sigue con la cascada, la especificidad y la herencia, y llega a flexbox, grid, propiedades lógicas, variables y pseudoelementos. Cada módulo se lee en un rato y sirve igual para repasar.

Mi consejo es leer un tema y probarlo en el momento con un HTML de prueba. CSS se aprende cambiando valores y viendo qué pasa.

Chuleta básica de CSS

Cómo se aplica CSS a una página

Hay tres formas: una hoja externa en un fichero aparte, una hoja interna dentro de <style> en el propio HTML, o estilos en línea con el atributo style. Para una web de varias páginas, la hoja externa es la buena, porque cambias el diseño de todas desde un único fichero. Se enlaza en el <head>:

<link rel="stylesheet" href="estilos.css" />

Selectores

p { }              /* todos los párrafos */
.aviso { }         /* elementos con class="aviso" */
#cabecera { }      /* el elemento con id="cabecera" */
nav a { }          /* enlaces que están dentro de un nav */
a:hover { }        /* enlace con el ratón encima */
input[type="email"] { }  /* campos de tipo email */

Cuando dos reglas chocan, gana la más específica: un id pesa más que una clase y una clase más que una etiqueta. Si empatan, gana la que va después en el CSS.

Modelo de caja

Todo en CSS es una caja con contenido, relleno (padding), borde (border) y margen (margin). Por defecto, width solo mide el contenido, así que una caja de 350 píxeles con un borde de 10 acaba ocupando 370. Con box-sizing: border-box el ancho incluye relleno y borde, y la caja mide los 350 que pusiste:

*, *::before, *::after {
  box-sizing: border-box;
}

.caja {
  width: 350px;
  padding: 20px;
  border: 10px solid black;
  margin: 0 auto;   /* centrada en horizontal */
}

Flexbox, para alinear en una dirección

Flexbox reparte elementos en una fila o en una columna. Encaja muy bien en menús, barras de botones o tarjetas en línea:

.menu {
  display: flex;
  justify-content: space-between;  /* reparte en horizontal */
  align-items: center;             /* centra en vertical */
  gap: 1rem;                       /* hueco entre elementos */
}

Grid, para maquetar en filas y columnas

Grid trabaja en dos dimensiones a la vez. La unidad fr reparte el espacio libre:

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* tres columnas iguales */
  gap: 20px;
}

Variables (propiedades personalizadas)

Se declaran con dos guiones delante y se usan con var(). Así cambias un color en un sitio y se actualiza en toda la web:

:root {
  --color-principal: #0b5394;
}

a {
  color: var(--color-principal);
}

CSS antes y ahora

Cuando escribí la primera versión de esta entrada, en 2009, muchas webs todavía se maquetaban con tablas, y cambiar el ancho de una columna obligaba a tocar página por página. CSS separó el diseño del contenido, y con flexbox y grid ya no hacen falta los trucos de entonces para colocar cajas. Con lo que tienes en esta chuleta se maqueta la mayoría de páginas sencillas, y el resto está en MDN cuando lo necesites.

Revisado y actualizado en octubre de 2026.