Cheat Sheet CSS

Selecciona todas las etiquetas de ese tipo. Ej: p { } afecta todos los párrafos.

Selecciona todos los elementos con esa clase CSS. El más usado en proyectos reales.

Selecciona el elemento con ese ID único. Alta especificidad, usar poco.

Selector universal. Selecciona todos los elementos. Usado en resets (* { box-sizing: border-box }).

Agrupa selectores. Aplica el mismo estilo a A y B.

Descendiente: cualquier B que esté dentro de A (a cualquier profundidad).

Hijo directo: solo el B que es hijo inmediato de A.

Pseudo-clase: se activa al pasar el mouse por encima del elemento.

Pseudo-clase: al elemento que tiene el foco (inputs al ser clicados).

Pseudo-clase: el enésimo hijo. Ej: :nth-child(2n) = pares.

Pseudo-elementos: inserta contenido antes / después del elemento. Requiere content: "".

Ancho y alto del área de contenido. Valores: px, %, rem, vw, auto.

Espacio interno entre el contenido y el borde. padding: top right bottom left.

Espacio externo fuera del borde. margin: auto centra horizontalmente.

Borde del elemento. Shorthand: border: 1px solid #ccc (grosor, estilo, color).

Incluye padding y border dentro del width. Recomendado para todo proyecto.

Esquinas redondeadas. Con 50% crea un círculo perfecto.

Qué pasa cuando el contenido desborda. Valores: hidden, scroll, auto, visible.

Sombra del elemento. Ej: box-shadow: 0 4px 12px rgba(0,0,0,0.2).

Contorno exterior al borde (no ocupa espacio). Común en :focus. outline: none para quitarlo.

Fuente tipográfica. Siempre terminar con una fuente genérica: sans-serif, serif, monospace.

Tamaño de fuente. Preferir rem (relativo al root) sobre px para accesibilidad.

Grosor de la fuente: 100–900 o normal (400), bold (700).

Estilo: normal, italic, oblique.

Altura de línea (interlineado). Valor recomendado: 1.5 – 1.7 para texto de lectura.

Color del texto. Acepta: nombre, #hex, rgb(), rgba(), hsl().

Alineación del texto: left, center, right, justify.

Decoración: underline (subrayado), line-through (tachado), none.

Transformación: uppercase, lowercase, capitalize.

Espaciado entre letras. Útil para títulos en mayúsculas.

Trunca el texto con "...". Requiere también white-space: nowrap y overflow: hidden.

Color de fondo del elemento. Acepta cualquier valor de color CSS.

Imagen de fondo. Ej: url('foto.jpg') o un gradiente.

cover: llena el área (puede recortar). contain: entra completo (puede dejar espacio).

Posición de la imagen. Ej: center, top left, 50% 20%.

Repetición. Usar no-repeat para imágenes que no deben repetirse.

Transparencia del elemento completo. De 0 (invisible) a 1 (opaco). Afecta hijos también.

Color con canal alfa (transparencia) solo del fondo, sin afectar al texto hijo.

Gradiente lineal. Ej: linear-gradient(to right, #667eea, #764ba2).

Declara una variable CSS (custom property). Usar en :root { } para acceso global.

Usa una variable CSS. Ej: color: var(--color-primario).

Activa Flexbox. Los hijos directos se convierten en flex-items.

Dirección del eje principal: row (horizontal, default) / column (vertical).

Alinea en el eje principal: flex-start, flex-end, center, space-between, space-around, space-evenly.

Alinea en el eje secundario: flex-start, flex-end, center, stretch, baseline.

wrap: los items se envuelven a la siguiente línea cuando no caben. nowrap: fuerza una sola línea.

Espacio entre items flex. Más fácil que usar margin. Ej: gap: 16px.

Cuánto puede crecer un item para llenar el espacio disponible. flex-grow: 1 = ocupa todo lo que puede.

Shorthand: flex-grow: 1, flex-shrink: 1, flex-basis: 0. El item ocupa el espacio disponible.

Alineación individual de un item. Anula el align-items del contenedor.

Cambia el orden visual de un item sin cambiar el HTML. Default: 0.

Activa Grid. Los hijos directos se convierten en grid-items.

Define las columnas. Ej: repeat(3, 1fr) = 3 columnas iguales. 200px 1fr = fija + flexible.

Define las filas. Mismo formato que columns.

Espacio entre celdas. row-gap y column-gap para controlar por separado.

El item ocupa desde la línea 1 hasta la 3 (2 columnas). También: span 2.

El item ocupa desde la línea 1 hasta la 3 (2 filas).

Shorthand de align-items + justify-items. Centra todo el contenido.

Unidad fracción. 1fr = toma la fracción igual del espacio disponible.

Columna con mínimo 200px y máximo flexible. Útil para layouts responsive sin media queries.

Con repeat(): auto-fill llena con columnas vacías, auto-fit colapsa las vacías.

Por defecto. Flujo normal del documento. top/left/etc no tienen efecto.

Relativo a su posición normal. top/left/etc desplazan desde ahí. Crea contexto para absolute.

Relativo al padre posicionado más cercano (el que tiene position != static). Sale del flujo.

Fijo en la ventana. No se mueve al hacer scroll. Ideal para navbars y modales.

Flujo normal hasta cierto punto, luego se queda fijo. Ej: top: 0 se pega arriba al scrollear.

Desplazan el elemento desde cada lado. Solo funcionan si position no es static.

Orden de apilamiento. Mayor número = encima. Solo funciona en elementos posicionados.

Ocupa todo el ancho disponible. Genera salto de línea antes y después.

Solo ocupa su propio tamaño. No acepta width ni height.

Híbrido: fluye en línea pero acepta width, height, padding y margin.

Oculta el elemento y no ocupa espacio en el layout.

Oculta visualmente pero sí ocupa espacio en el layout.

Píxeles fijos. Independiente del tamaño de fuente del usuario.

Relativo al font-size del :root (16px por defecto). Recomendado para fuentes y espaciado.

Relativo al font-size del elemento padre. Se acumula al anidar.

Porcentaje del elemento padre. Muy usado para width y height responsive.

% del ancho / alto del viewport. 100vh = pantalla completa.

Anima el cambio suave de una propiedad. Ej: transition: background-color 0.3s ease.

Anima todas las propiedades que cambien. Más fácil pero menos performante.

Curva de la transición. ease: arranca lento y frena. linear: velocidad constante.

Mueve el elemento horizontalmente sin afectar el layout. También translateY() y translate(x, y).

Escala el elemento. scale(1.1) = 10% más grande. scale(0.9) = 10% más pequeño.

Rota el elemento. Ej: rotate(45deg). Acepta deg, rad, turn.

Define una animación. Ej: @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }.

Aplica la animación. Ej: animation: fadeIn 0.5s ease forwards.

Muestra el cursor de mano al pasar por el elemento. Siempre en botones custom.