Chuleta de CSS

Curso de CSS

Resumen de consulta rápida con las propiedades y selectores de CSS moderno que más vas a usar. Cada apartado enlaza a la lección donde se explica con calma.

Sintaxis y cómo añadir CSS

/* selector { propiedad: valor; } */
.tarjeta {
  color: #333;
  padding: 16px;
}

Código	Qué hace
`<link rel="stylesheet" href="estilos.css">`	Hoja externa, en el `head` (la forma recomendada)
`<style> ... </style>`	CSS dentro del propio HTML
`style="color: red"`	CSS en línea en un elemento
`/* comentario */`	Comentario
`@import url("base.css");`	Importa otra hoja (al principio del archivo)

Más en: ¿Qué es CSS?

Selectores

Código	Qué hace
`*`	Todos los elementos
`p`	Por etiqueta
`.boton`	Por clase
`#cabecera`	Por id
`h1, h2`	Varios selectores a la vez
`nav a`	Descendientes: cualquier `a` dentro de `nav`
`ul > li`	Hijos directos
`h2 + p`	Hermano inmediatamente siguiente
`h2 ~ p`	Todos los hermanos siguientes
`.boton.activo`	Elemento con las dos clases
`[type="email"]`	Por atributo y valor
`[href^="https"]`, `[href$=".pdf"]`	Atributo que empieza o termina por
`a:hover`, `:focus-visible`	Ratón encima; foco con teclado
`:active`, `:visited`	Pulsado; enlace ya visitado
`li:first-child`, `li:last-child`	Primer y último hijo
`li:nth-child(2n)`	Hijos pares (`odd` para impares)
`:not(.activo)`	Los que no cumplen el selector
`:is(h1, h2) a`	Agrupa selectores en uno
`.tarjeta:has(img)`	Elementos que contienen algo
`::before`, `::after`	Contenido generado (con `content: ""`)
`::placeholder`, `::selection`	Texto de ejemplo; texto seleccionado

Más en: Selectores

Cascada, especificidad y herencia

Código	Qué hace
Orden	A igual especificidad, gana la última regla
`p` = (0,0,1)	Especificidad de etiqueta
`.clase` = (0,1,0)	Clase, atributo o pseudoclase
`#id` = (1,0,0)	Id: pesa más que cualquier número de clases
`style="..."`	En línea: gana a las hojas de estilo
`!important`	Salta la especificidad; evítalo
`:where(...)`	Especificidad cero
`color`, `font-*`, `line-height`	Se heredan de padres a hijos
`margin`, `padding`, `border`	No se heredan
`inherit`	Toma el valor del padre
`initial`	Vuelve al valor por defecto de la propiedad
`unset`	Hereda si la propiedad se hereda; si no, `initial`
`@layer base, componentes;`	Capas: controla qué bloques ganan

Más en: Cascada y herencia

Unidades

Código	Qué hace
`px`	Píxeles: tamaño fijo
`%`	Porcentaje del contenedor
`em`	Relativo al tamaño de letra del propio elemento
`rem`	Relativo al tamaño de letra de `html` (16px por defecto)
`vw`, `vh`	1 % del ancho y del alto de la ventana
`dvh`, `svh`	Alto de ventana real en móviles
`ch`	Ancho del carácter `0` (útil para líneas de texto)
`fr`	Fracción del espacio libre en Grid
`calc(100% - 2rem)`	Operaciones con unidades mezcladas
`min(90%, 60rem)`	El menor de los valores
`max(1rem, 2vw)`	El mayor de los valores
`clamp(1rem, 4vw, 2rem)`	Valor fluido con mínimo y máximo

Más en: Unidades

Colores, fondos, bordes y sombras

Código	Qué hace
`color: tomato`	Color de texto por nombre
`#2d6cdf`, `#2d6cdf80`	Hexadecimal; con transparencia
`rgb(45 108 223 / 50%)`	Rojo, verde, azul y opacidad
`hsl(220 70% 50%)`	Tono, saturación y luminosidad
`oklch(60% 0.15 250)`	Espacio de color moderno y uniforme
`currentColor`	El valor actual de `color`
`opacity: 0.5`	Transparencia de todo el elemento
`background-color`	Color de fondo
`background-image: url("fondo.jpg")`	Imagen de fondo
`background-size: cover`	La imagen cubre toda la caja
`background-position: center`	Posición de la imagen
`background-repeat: no-repeat`	Sin repetición
`linear-gradient(to right, #fff, #000)`	Degradado lineal
`radial-gradient(circle, #fff, #000)`	Degradado circular
`border: 1px solid #ccc`	Borde: grosor, estilo y color
`border-top`, `border-left`…	Un solo lado
`border-radius: 8px` / `50%`	Esquinas redondeadas / círculo
`outline: 2px solid blue`	Contorno que no ocupa espacio
`box-shadow: 0 4px 12px rgb(0 0 0 / 20%)`	Sombra: x, y, desenfoque, color
`text-shadow: 1px 1px 2px #000`	Sombra del texto

Más en: Colores y fondos, Bordes y sombras

Tipografía y fuentes web

Código	Qué hace
`font-family: "Inter", system-ui, sans-serif`	Fuente con alternativas
`font-size: 1.125rem`	Tamaño de letra
`font-weight: 700`	Grosor (100 a 900; `bold` = 700)
`font-style: italic`	Cursiva
`line-height: 1.5`	Interlineado (sin unidad)
`text-align: center`	Alineación (`left`, `right`, `justify`)
`text-decoration: none`	Quita el subrayado
`text-transform: uppercase`	Mayúsculas (`lowercase`, `capitalize`)
`letter-spacing: 0.05em`	Espacio entre letras
`text-indent: 2em`	Sangría de la primera línea
`white-space: nowrap`	Sin saltos de línea
`text-overflow: ellipsis`	Puntos suspensivos (con `overflow: hidden`)
`text-wrap: balance`	Reparte mejor las líneas de los títulos
`font: italic 700 1rem/1.5 sans-serif`	Atajo de varias propiedades
`@font-face`	Carga una fuente propia
`font-display: swap`	Muestra texto mientras carga la fuente

@font-face {
  font-family: "Titulos";
  src: url("fuentes/titulos.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

Más en: Tipografía, Fuentes web

Modelo de caja y display

Código	Qué hace
`width`, `height`	Ancho y alto del contenido
`min-width`, `max-width`	Límites de tamaño
`padding: 16px`	Relleno interior
`margin: 16px`	Margen exterior
`margin: 10px 20px`	Arriba y abajo, izquierda y derecha
`margin: 1px 2px 3px 4px`	Arriba, derecha, abajo, izquierda
`margin: 0 auto`	Centra un bloque con ancho definido
`box-sizing: border-box`	`width` incluye padding y borde
`aspect-ratio: 16 / 9`	Proporción fija
`display: block`	Ocupa todo el ancho, línea nueva
`display: inline`	En línea; ignora `width` y `height`
`display: inline-block`	En línea pero acepta tamaño
`display: none`	Oculta y no ocupa espacio
`visibility: hidden`	Oculta pero sigue ocupando espacio
`overflow: hidden` / `auto`	Recorta / barra de desplazamiento si hace falta
`overflow-x: auto`	Desplazamiento solo horizontal

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

Los márgenes verticales de dos bloques seguidos se colapsan: queda el mayor, no la suma.

Más en: Modelo de caja, display y overflow

Posicionamiento

Código	Qué hace
`position: static`	Valor por defecto: flujo normal
`position: relative`	Se desplaza desde su sitio; sirve de referencia
`position: absolute`	Fuera del flujo; relativo al ancestro posicionado
`position: fixed`	Fijo respecto a la ventana
`position: sticky`	Se pega al hacer scroll (con `top`)
`top`, `right`, `bottom`, `left`	Desplazamientos
`inset: 0`	Atajo de los cuatro lados
`z-index: 10`	Orden de apilamiento (necesita `position`)

.tarjeta { position: relative; }
.etiqueta {
  position: absolute;
  top: 8px;
  right: 8px;
}

Más en: Posicionamiento

Flexbox

Código	Qué hace
`display: flex`	Activa Flexbox en el padre
`flex-direction: row` / `column`	Fila o columna
`justify-content: center`	Reparto en el eje principal
`space-between`, `space-around`, `space-evenly`	Otros repartos del espacio
`align-items: center`	Alineación en el eje cruzado
`align-items: stretch`	Estira los hijos (por defecto)
`flex-wrap: wrap`	Permite varias líneas
`gap: 16px`	Espacio entre hijos
`align-content`	Reparte las líneas cuando hay `wrap`
`flex-grow: 1`	El hijo crece para ocupar el hueco
`flex-shrink: 0`	El hijo no se encoge
`flex-basis: 200px`	Tamaño inicial del hijo
`flex: 1`	Atajo: crece y reparte a partes iguales
`align-self: flex-end`	Alinea solo ese hijo
`order: -1`	Cambia el orden visual
`margin-left: auto`	Empuja el hijo hacia el final

.centrado {
  display: flex;
  justify-content: center;
  align-items: center;
}

Más en: Flexbox

Grid

Código	Qué hace
`display: grid`	Activa Grid en el padre
`grid-template-columns: 1fr 2fr`	Dos columnas: la segunda, el doble
`repeat(3, 1fr)`	Tres columnas iguales
`repeat(auto-fit, minmax(200px, 1fr))`	Columnas que se adaptan solas
`grid-template-rows: auto 1fr auto`	Tamaño de las filas
`gap: 1rem 2rem`	Espacio entre filas y columnas
`grid-column: 1 / 3`	El hijo va de la línea 1 a la 3
`grid-column: span 2`	El hijo ocupa dos columnas
`grid-row: 1 / -1`	Ocupa todas las filas explícitas
`grid-template-areas`	Diseño con nombres de zonas
`grid-area: menu`	Coloca el hijo en una zona
`justify-items`, `align-items`	Alinea el contenido de las celdas
`place-items: center`	Centra en los dos ejes
`grid-auto-rows: 200px`	Alto de las filas creadas automáticamente

.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "cabecera cabecera"
    "menu     contenido";
}

Más en: Grid

Responsive

Código	Qué hace
`<meta name="viewport" ...>`	Imprescindible en el HTML
`@media (min-width: 768px) { }`	Estilos a partir de 768px (mobile first)
`@media (max-width: 767px) { }`	Estilos hasta 767px
`@media (width >= 768px) { }`	Sintaxis moderna de rangos
`@media (orientation: landscape)`	Pantalla en horizontal
`@media (prefers-color-scheme: dark)`	El usuario usa modo oscuro
`@media (prefers-reduced-motion: reduce)`	El usuario prefiere menos animación
`@media (hover: hover)`	Dispositivos con ratón
`@media print`	Estilos para imprimir
`max-width: 100%`	Imágenes que no se salen de su caja

.productos { display: grid; gap: 1rem; }

@media (min-width: 768px) {
  .productos { grid-template-columns: repeat(3, 1fr); }
}

Más en: Responsive

Imágenes, listas, tablas y formularios

Código	Qué hace
`img { max-width: 100%; height: auto; }`	Imagen fluida
`object-fit: cover`	Rellena la caja sin deformar (recorta)
`object-fit: contain`	Cabe entera sin deformar
`object-position: top`	Qué parte se ve al recortar
`filter: grayscale(1)`	Filtros (`blur()`, `brightness()`…)
`list-style: none`	Quita las viñetas
`list-style-type: square`	Tipo de viñeta
`li::marker { color: red; }`	Estilo de la viñeta o número
`border-collapse: collapse`	Bordes de tabla sencillos, sin doble línea
`tr:nth-child(even)`	Filas alternas de color (cebra)
`text-align: right` en `td`	Alinea números a la derecha
`input:focus-visible`	Estilo del campo con foco
`input:invalid`, `:user-invalid`	Campo no válido (tras interactuar)
`accent-color: #2d6cdf`	Color de casillas, radios y rangos
`appearance: none`	Quita el estilo nativo del control
`font: inherit`	Los campos usan la fuente de la página
`cursor: pointer`	Cursor de mano en botones

Más en: Imágenes en CSS, Listas y tablas, Formularios

Variables y animaciones

Código	Qué hace
`:root { --primario: #2d6cdf; }`	Declara una variable global
`color: var(--primario)`	Usa la variable
`var(--primario, blue)`	Con valor de reserva
`transition: background-color 0.3s ease`	Cambio suave entre estados
`transition: all 0.2s`	Anima todas las propiedades (menos eficiente)
`ease`, `linear`, `ease-in-out`	Curvas de velocidad
`transition-delay: 0.1s`	Retraso antes de empezar
`transform: translateY(-4px)`	Mueve el elemento
`transform: scale(1.05)`	Lo agranda o encoge
`transform: rotate(45deg)`	Lo gira
`@keyframes nombre { }`	Define los pasos de una animación
`animation: aparecer 1s ease forwards`	Aplica una animación
`animation-iteration-count: infinite`	Se repite sin fin

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.aviso { animation: aparecer 0.5s ease; }

Más en: Variables CSS, Animaciones

CSS moderno, organización y Bootstrap

Código	Qué hace
`.tarjeta { & h2 { } }`	Anidamiento nativo
`&:hover`	Estado del propio selector anidado
`container-type: inline-size`	Convierte en contenedor para consultas
`@container (min-width: 400px) { }`	Estilos según el ancho del contenedor
`margin-inline`, `padding-block`	Propiedades lógicas (horizontal / vertical)
`color-mix(in srgb, red 50%, white)`	Mezcla dos colores
`scroll-behavior: smooth`	Desplazamiento suave a las anclas
`@supports (display: grid) { }`	Estilos si el navegador lo admite
Orden: reset, base, diseño, componentes, utilidades	Estructura recomendada del archivo
BEM: `.tarjeta__titulo--destacado`	Bloque, elemento y modificador
`class="container"`	Bootstrap: contenedor centrado
`class="row"` + `class="col-md-6"`	Bootstrap: rejilla de 12 columnas
`class="btn btn-primary"`	Bootstrap: botón
`class="d-flex gap-2 mt-3"`	Bootstrap: utilidades de flex y espacios

Más en: CSS moderno, Organizar el CSS, Proyecto: landing, Bootstrap, Bootstrap: rejilla, Bootstrap: componentes

CSS · devschool.es/chuletas/css/