CSS Cheatsheet
Referencia rapida de CSS3: selectores, box model, tipografia, colores, Flexbox, Grid, posicionamiento, transforms, transiciones, animaciones, responsive, variables y unidades. Imprimi esta pagina y tenela a mano.
Selectores
| Selector | Descripción | Ejemplo |
|---|---|---|
| * | Selecciona todos los elementos | * { margin: 0; } |
| tag | Selecciona por tipo de etiqueta | p { color: red; } |
| #id | Selecciona por ID (unico en la pagina) | #header { } |
| .class | Selecciona por clase | .card { } |
| X, Y | Selector multiple (OR) | h1, h2 { } |
| X Y | Descendiente (cualquier nivel) | nav a { } |
| X > Y | Hijo directo (solo primer nivel) | ul > li { } |
| X + Y | Hermano adyacente (siguiente inmediato) | h2 + p { } |
| X ~ Y | Hermano general (todos los siguientes) | h2 ~ p { } |
| [attr] | Tiene el atributo | [title] { } |
| [attr="val"] | Atributo con valor exacto | [type="email"] { } |
| [attr^="val"] | Atributo que empieza con | [href^="https"] { } |
| [attr$="val"] | Atributo que termina con | [href$=".pdf"] { } |
| [attr*="val"] | Atributo que contiene | [class*="btn"] { } |
| Pseudo-clase | Descripción | Ejemplo |
|---|---|---|
| :hover | Al pasar el mouse sobre el elemento | a:hover { } |
| :focus | Al enfocar (click o tab) | input:focus { } |
| :active | Al hacer click (mousedown) | button:active { } |
| :visited | Links ya visitados | a:visited { } |
| :first-child | Primer hijo de su padre | li:first-child { } |
| :last-child | Ultimo hijo de su padre | li:last-child { } |
| :nth-child(n) | N-esimo hijo (acepta formula 2n, 3n+1, odd, even) | li:nth-child(3) { } |
| :nth-last-child(n) | N-esimo hijo contando desde el final | li:nth-last-child(2) { } |
| :nth-of-type(n) | N-esimo de su tipo (ignora otros hermanos) | p:nth-of-type(2) { } |
| :first-of-type | Primer elemento de su tipo | p:first-of-type { } |
| :not(selector) | Negacion: todo excepto lo que matchea | :not(.active) { } |
| :is(selector) | Grupo de selectores simplificado | :is(h1, h2, h3) { } |
| :has(selector) | Padre que contiene un hijo que matchea | div:has(img) { } |
| :checked | Checkbox o radio seleccionado | input:checked { } |
| :disabled / :enabled | Elemento desactivado / activado | button:disabled { } |
| :empty | Elemento sin hijos (ni texto) | div:empty { } |
| :focus-within | Un hijo tiene el focus | form:focus-within { } |
| Pseudo-elemento | Descripción | Ejemplo |
|---|---|---|
| ::before | Contenido generado antes del elemento (requiere content) | h1::before { content: ">"; } |
| ::after | Contenido generado despues del elemento (requiere content) | .clearfix::after { } |
| ::first-line | Primera linea del texto | p::first-line { } |
| ::first-letter | Primera letra del texto | p::first-letter { } |
| ::selection | Texto seleccionado por el usuario | ::selection { background: blue; } |
| ::placeholder | Texto placeholder de un input | input::placeholder { } |
Box Model
| Propiedad | Descripción | Valores |
|---|---|---|
| width | Ancho del contenido | px | em | % | auto | fit-content | min-content | max-content |
| height | Alto del contenido | px | em | % | auto | fit-content | min-content | max-content |
| min-width | Ancho minimo | px | em | % | 0 |
| max-width | Ancho maximo | px | em | % | none |
| min-height | Alto minimo | px | em | % | 0 |
| max-height | Alto maximo | px | em | % | none |
| padding | Espacio interior (shorthand: arriba der abajo izq) | px | em | % |
| padding-top/right/bottom/left | Padding individual por lado | px | em | % |
| margin | Espacio exterior (shorthand; auto centra block) | px | em | % | auto |
| margin-top/right/bottom/left | Margin individual por lado | px | em | % | auto |
| box-sizing | Como se calcula width/height (border-box incluye padding+border) | content-box | border-box |
| overflow | Contenido que desborda | visible | hidden | scroll | auto |
| overflow-x / overflow-y | Overflow en un eje especifico | visible | hidden | scroll | auto |
| outline | Linea exterior al border (no afecta layout) | color style width | none |
| outline-offset | Distancia entre outline y border | px |
| resize | Permitir al usuario redimensionar | none | both | horizontal | vertical |
| Propiedad | Descripción | Valores |
|---|---|---|
| border | Shorthand: ancho estilo color | 1px solid #000 |
| border-width | Ancho del borde | thin | medium | thick | px |
| border-style | Estilo del borde | none | solid | dotted | dashed | double | groove | ridge | inset | outset |
| border-color | Color del borde | color | transparent |
| border-radius | Redondeo de esquinas (shorthand) | px | em | % |
| border-top/right/bottom/left | Border individual por lado | 1px solid #000 |
Tipografia y Texto
| Propiedad | Descripción | Valores |
|---|---|---|
| font-family | Tipografia del texto (lista con fallback) | "Font Name", sans-serif | serif | monospace |
| font-size | Tamano de la fuente | px | em | rem | % | clamp() | xx-small ... xx-large |
| font-weight | Grosor de la fuente | normal | bold | lighter | bolder | 100 ... 900 |
| font-style | Estilo de la fuente | normal | italic | oblique |
| font-variant | Variante (small caps, etc.) | normal | small-caps |
| line-height | Altura de linea (interlineado) | normal | number (1.5) | px | em | % |
| letter-spacing | Espacio entre letras (tracking) | normal | px | em |
| word-spacing | Espacio entre palabras | normal | px | em |
| text-align | Alineacion horizontal | left | right | center | justify | start | end |
| text-transform | Transformación del texto | none | uppercase | lowercase | capitalize | full-width |
| text-decoration | Lineas decorativas (subrayado, tachado) | none | underline | overline | line-through | wavy |
| text-decoration-color | Color de la linea decorativa | color |
| text-indent | Sangria de la primera linea | px | em | % |
| white-space | Como se maneja el espacio en blanco | normal | nowrap | pre | pre-wrap | pre-line | break-spaces |
| word-break | Como romper palabras al final de linea | normal | break-all | keep-all | word-break |
| overflow-wrap | Permitir romper palabras largas | normal | break-word | anywhere |
| text-overflow | Que mostrar cuando el texto se corta | clip | ellipsis |
| text-shadow | Sombra aplicada al texto | (h-offset) (v-offset) (blur) color |
| color | Color del texto | color | hex | rgb | hsl |
Colores y Fondos
| Formato | Descripción | Ejemplo |
|---|---|---|
| HEX | Notacion hexadecimal (6 digitos) | #ff6b6b |
| HEX 8 digitos | Hex con canal alpha (transparencia) | #ff6b6b80 |
| rgb() | Rojo, verde, azul (0-255) | rgb(255, 107, 107) |
| rgba() | RGB con canal alpha (0-1) | rgba(255, 107, 107, 0.5) |
| hsl() | Tono, saturacion, luminosidad | hsl(0, 100%, 71%) |
| hsla() | HSL con canal alpha | hsla(0, 100%, 71%, 0.5) |
| named | Nombre de color predefinido (140+) | red | steelblue | coral |
| oklch() | Perceptualmente uniforme (moderno) | oklch(0.7 0.15 20) |
| color-mix() | Mezclar dos colores con porcentaje | color-mix(in srgb, blue, white 50%) |
| light-dark() | Valor diferente para tema claro/oscuro | light-dark(#fff, #111) |
| Propiedad | Descripción | Valores |
|---|---|---|
| opacity | Transparencia del elemento (afecta todo, incluyendo hijos) | 0 ... 1 |
| background-color | Color de fondo | color | transparent |
| background-image | Imagen o gradiente de fondo | url() | linear-gradient() | radial-gradient() | conic-gradient() |
| background-size | Tamano de la imagen de fondo | cover | contain | px | % | auto |
| background-position | Posicion de la imagen de fondo | center | top | bottom | left | right | px | % |
| background-repeat | Repeticion de la imagen de fondo | repeat | no-repeat | repeat-x | repeat-y | space | round |
| background-attachment | Comportamiento al hacer scroll | scroll | fixed | local |
| background | Shorthand de todas las propiedades de fondo | color image position/size repeat attachment |
| box-shadow | Sombra exterior o interior del elemento | inset (h) (v) (blur) (spread) color |
| linear-gradient() | Gradiente lineal | linear-gradient(angulo, color1, color2) |
| radial-gradient() | Gradiente radial (circulo/elipse) | radial-gradient(shape size at pos, c1, c2) |
| conic-gradient() | Gradiente conico (giro) | conic-gradient(from angulo at pos, c1, c2) |
Flexbox
Propiedades del contenedor (padre con display: flex):
| Propiedad | Descripción | Valores |
|---|---|---|
| display | Activa el contexto flex | flex | inline-flex |
| flex-direction | Dirección de los items (eje principal) | row | row-reverse | column | column-reverse |
| flex-wrap | Permitir que los items se envuelvan | nowrap | wrap | wrap-reverse |
| flex-flow | Shorthand de direction + wrap | row wrap | column nowrap |
| justify-content | Alineacion en el eje principal | flex-start | flex-end | center | space-between | space-around | space-evenly |
| align-items | Alineacion en el eje cruzado (todos los items) | stretch | flex-start | flex-end | center | baseline |
| align-content | Alineacion de las filas (con wrap activo) | stretch | flex-start | flex-end | center | space-between | space-around |
| gap | Espacio entre items (shorthand) | px | em | % |
| row-gap / column-gap | Gap individual por eje | px | em | % |
Propiedades de los items (hijos del contenedor flex):
| Propiedad | Descripción | Valores |
|---|---|---|
| flex-grow | Proporcion de crecimiento (default: 0 = no crece) | number (0, 1, 2...) |
| flex-shrink | Proporcion de encogimiento (default: 1 = se encoge) | number (0, 1, 2...) |
| flex-basis | Tamano base antes de crecer/encoger | auto | px | em | % | content |
| flex | Shorthand: grow shrink basis | 0 1 auto | 1 | none (0 0 auto) |
| align-self | Alineacion individual (sobreescribe align-items) | auto | stretch | flex-start | flex-end | center | baseline |
| order | Orden visual (sin cambiar HTML) | integer (0 = default, negativos primero) |
CSS Grid Layout
Propiedades del contenedor (padre con display: grid):
| Propiedad | Descripción | Valores |
|---|---|---|
| display | Activa el contexto grid | grid | inline-grid |
| grid-template-columns | Definicion de columnas | 1fr 1fr 1fr | repeat(3, 1fr) | minmax() | auto |
| grid-template-rows | Definicion de filas | auto 1fr auto | repeat(2, 100px) | minmax() |
| grid-template-areas | Nombrar areas del grid con strings | "header header" "sidebar main" |
| gap | Espacio entre celdas (filas y columnas) | px | em | % |
| row-gap / column-gap | Gap individual | px | em | % |
| justify-items | Alineacion horizontal de items dentro de su celda | start | end | center | stretch |
| align-items | Alineacion vertical de items dentro de su celda | start | end | center | stretch | baseline |
| place-items | Shorthand: align-items + justify-items | center | start end | stretch |
| justify-content | Alineacion del grid en el eje horizontal | start | end | center | space-between | space-around | space-evenly |
| align-content | Alineacion del grid en el eje vertical | start | end | center | space-between | space-around | space-evenly |
| grid-auto-columns | Tamano de columnas implícitas (creadas automáticamente) | 1fr | minmax(200px, 1fr) | auto |
| grid-auto-rows | Tamano de filas implícitas | minmax(100px, auto) | 1fr | auto |
| grid-auto-flow | Dirección de auto-colocación | row | column | dense |
Propiedades de los items (hijos del contenedor grid):
| Propiedad | Descripción | Valores |
|---|---|---|
| grid-column-start | Linea de inicio del item (columna) | number | span N |
| grid-column-end | Linea final del item (columna) | number | span N |
| grid-column | Shorthand: start / end | 1 / 3 | 1 / span 2 | span 3 |
| grid-row-start | Linea de inicio del item (fila) | number | span N |
| grid-row-end | Linea final del item (fila) | number | span N |
| grid-row | Shorthand: start / end | 1 / 3 | 2 / span 2 |
| grid-area | Shorthand: row-start / col-start / row-end / col-end, o nombre de area | 1 / 1 / 3 / 4 | "header" |
| justify-self | Alineacion horizontal individual | start | end | center | stretch |
| align-self | Alineacion vertical individual | start | end | center | stretch |
| place-self | Shorthand: align-self + justify-self | center | start end |
Posicionamiento
| Propiedad | Descripción | Valores |
|---|---|---|
| display | Como se renderiza el elemento | block | inline | inline-block | none | flex | grid | table | flow-root |
| position | Esquema de posicionamiento | static | relative | absolute | fixed | sticky |
| top | Offset desde el borde superior | px | em | % | auto |
| right | Offset desde el borde derecho | px | em | % | auto |
| bottom | Offset desde el borde inferior | px | em | % | auto |
| left | Offset desde el borde izquierdo | px | em | % | auto |
| inset | Shorthand: top right bottom left | px | em | % |
| inset-block / inset-inline | Offset logico (para escritura bidireccional) | px | em | % | auto |
| z-index | Orden de apilamiento (solo funciona con position != static) | auto | integer (negativo = detras) |
| float | Flotar el elemento (usado poco hoy) | left | right | none | inline-start | inline-end |
| clear | No permitir floats en un lado | left | right | both | none |
| visibility | Mostrar/ocultar (reserva espacio) | visible | hidden | collapse |
| clip-path | Recortar el area visible del elemento | circle() | ellipse() | polygon() | inset() | url(#clip) |
| isolation | Crea un nuevo stacking context | auto | isolate |
Transforms
| Propiedad / Función | Descripción | Valores |
|---|---|---|
| transform | Aplica una o más transformaciones 2D/3D | translate() | rotate() | scale() | skew() | matrix() |
| translate(x, y) | Mover el elemento en X e Y | px | em | % |
| translateX(x) | Mover solo en el eje X | px | em | % |
| translateY(y) | Mover solo en el eje Y | px | em | % |
| translate(tx, ty) | Propiedad individual de translate (nueva) | px | em | % |
| rotate(angulo) | Rotar el elemento | deg | rad | turn (ej: 45deg, 0.5turn) |
| scale(x, y) | Escalar el elemento (1 = sin cambio) | number (0.5, 1.5, 2) |
| scale(s) | Propiedad individual de scale (nueva) | number |
| skew(x, y) | Deformar el elemento (sesgar) | deg (ej: skewX(10deg)) |
| transform-origin | Punto de origen de la transformacion | center | top left | px | % |
| perspective | Profundidad para transforms 3D (en el padre) | px (ej: 1000px) |
| perspective() | Profundidad para transforms 3D (en el hijo) | px |
| translate3d(x,y,z) | Traslacion 3D | px |
| rotateX/Y/Z() | Rotacion sobre un eje especifico 3D | deg |
| scale3d(x,y,z) | Escala 3D | number |
| transform-style | Los hijos se transforman en 3D plano o real | flat | preserve-3d |
| backface-visibility | Mostrar/ocultar la cara trasera en 3D | visible | hidden |
Transiciones y Animaciones
Propiedades de transicion (animar cambio de un valor a otro):
| Propiedad | Descripción | Valores |
|---|---|---|
| transition | Shorthand: property duration timing-function delay | all 0.3s ease | color 0.5s ease-in 0.1s |
| transition-property | Que propiedades animar | all | none | color, opacity, transform |
| transition-duration | Cuanto dura la transicion | s | ms (ej: 0.3s, 300ms) |
| transition-timing-function | Curva de aceleracion | ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier() | steps() |
| transition-delay | Espera antes de iniciar | s | ms (ej: 0s, 0.2s) |
Propiedades de animacion (keyframes + animation):
| Propiedad | Descripción | Valores |
|---|---|---|
| @keyframes nombre | Define los fotogramas clave de la animacion | 0% { ... } 50% { ... } 100% { ... } | from { } to { } |
| animation | Shorthand (excepto animation-event) | name duration timing delay iteration direction fill play |
| animation-name | Nombre del @keyframes a ejecutar | custom-name | none |
| animation-duration | Duracion de un ciclo | s | ms |
| animation-timing-function | Curva de aceleracion por ciclo | ease | linear | cubic-bezier() | steps() |
| animation-delay | Espera antes de iniciar | s | ms |
| animation-iteration-count | Cantidad de repeticiones | number | infinite |
| animation-direction | Direccion de cada ciclo | normal | reverse | alternate | alternate-reverse |
| animation-fill-mode | Estado antes/despues de la animacion | none | forwards | backwards | both |
| animation-play-state | Play/pause de la animacion | running | paused |
Easing / Timing functions comunes:
| Función | Descripción | Curva equivalente |
|---|---|---|
| linear | Velocidad constante de inicio a fin | cubic-bezier(0, 0, 1, 1) |
| ease | Inicio rapido, desacelera al final (default) | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | Arranca lento, acelera al final | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | Arranca rapido, desacelera al final | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | Lento al inicio y al final, rapido en el medio | cubic-bezier(0.42, 0, 0.58, 1) |
| steps(n, start/end) | Saltos discretos (no interpolacion) | steps(4, end) | steps(10, jump-end) |
Responsive y Viewport
| Regla / Propiedad | Descripción | Valores / Sintaxis |
|---|---|---|
| @media | Aplica estilos condicionalmente segun viewport o dispositivo | @media (min-width: 768px) { } |
| @media (max-width: ...) | Desktop-first: estilos para pantallas menores | (max-width: 1024px) |
| @media (min-width: ...) | Mobile-first: estilos para pantallas mayores | (min-width: 768px) |
| @media (prefers-color-scheme) | Tema claro u oscuro del sistema | dark | light |
| @media (prefers-reduced-motion) | Usuario prefiere menos animaciones | reduce | no-preference |
| @media (orientation) | Orientacion del dispositivo | portrait | landscape |
| @media (pointer) | Tipo de input primario | fine | coarse | none |
| @container | Media queries basadas en el contenedor padre (no viewport) | @container (min-width: 400px) { } |
| container-type | Define el tipo de contencion del contenedor | inline-size | size | normal |
| container-name | Nombre del contenedor para @container | custom-name |
Breakpoints comunes (mobile-first):
| Nombre | Breakpoint | Dispositivo tipico |
|---|---|---|
| sm | 640px+ | Telefonos landscape, phablets |
| md | 768px+ | Tablets portrait |
| lg | 1024px+ | Tablets landscape, laptops |
| xl | 1280px+ | Desktops estandar |
| 2xl | 1536px+ | Desktops grandes, monitores |
Variables CSS y Funciones
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
| --custom-prop | Declarar una variable CSS (custom property) | :root { --primary: #58a6ff; } |
| var() | Usar una variable CSS con fallback opcional | color: var(--primary, blue); |
| @property | Registrar una custom property para animacion y tipado | @property --hue { syntax: "<number>"; initial-value: 0; inherits: false; } |
Funciones CSS esenciales:
| Función | Descripción | Ejemplo |
|---|---|---|
| calc() | Calculos matematicos con unidades mixtas | width: calc(100% - 40px); |
| min() | El menor de dos o más valores | width: min(100%, 800px); |
| max() | El mayor de dos o más valores | width: max(300px, 50%); |
| clamp(min, ideal, max) | Valor entre un minimo y un maximo (responsive sin media query) | font-size: clamp(1rem, 2.5vw, 2rem); |
| env() | Variables de entorno del navegador (safe area insets) | padding: env(safe-area-inset-bottom); |
| url() | Cargar un recurso externo | background: url("img.jpg"); |
| attr() | Leer el valor de un atributo HTML | content: attr(data-tooltip); |
| counter() | Valor de un contador CSS | content: counter(section); |
| element() | Genera una imagen a partir de un elemento HTML (experimental) | background: element(#myElement); |
Unidades CSS
| Tipo | Unidad | Descripción |
|---|---|---|
| Absoluta | px | Pixeles (1px = 1/96 de pulgada en pantallas standard). Unidad más usada. |
| Absoluta | pt | Puntos (1pt = 1/72 de pulgada). Usada en impresion y documentos Word. |
| Absoluta | cm | mm | in | Centimetros, milimetros, pulgadas. Raras en CSS web, utiles para print. |
| Relativa a fuente | em | Relativa al font-size del elemento padre. Se compone si esta anidado. |
| Relativa a fuente | rem | Relativa al font-size del elemento raiz (<html>). No se compone, más predecible. |
| Relativa a fuente | % (en font-size) | Porcentaje del font-size del padre (ej: 150% = 1.5x el padre). |
| Relativa a viewport | vw | 1% del ancho del viewport |
| Relativa a viewport | vh | 1% del alto del viewport |
| Relativa a viewport | vmin | 1% del menor valor entre vw y vh |
| Relativa a viewport | vmax | 1% del mayor valor entre vw y vh |
| Viewport dinámico | dvh | svh | lvh | Viewport height teniendo en cuenta la barra de dirección del móvil (dvh = dinámico, svh = small, lvh = large). |
| Grid exclusivo | fr | Fraccion del espacio disponible (solo en CSS Grid). 1fr 2fr = 1/3 y 2/3. |
Equivalencias tipograficas (asumiendo 1rem = 16px por defecto del navegador):
| Puntos (pt) | Pixeles (px) | rem | em | Uso tipico |
|---|---|---|---|---|
| 6pt | 8px | 0.5rem | 0.5em | Texto legal, captions muy chicos |
| 7.5pt | 10px | 0.625rem | 0.625em | Texto minimo legible en web |
| 9pt | 12px | 0.75rem | 0.75em | Textos secundarios, small print |
| 10pt | 13.3px | 0.831rem | 0.831em | Texto corporativo estandar (Word) |
| 10.5pt | 14px | 0.875rem | 0.875em | Texto chico en web, labels |
| 11pt | 14.7px | 0.919rem | 0.919em | Texto en Word (body comun) |
| 12pt | 16px | 1rem | 1em | Texto base web / Body en Word |
| 14pt | 18.7px | 1.167rem | 1.167em | Texto destacado en Word |
| 16pt | 21.3px | 1.333rem | 1.333em | Subtitulo en Word |
| 18pt | 24px | 1.5rem | 1.5em | H3 / texto grande en web |
| 22pt | 29.3px | 1.833rem | 1.833em | H2 en web |
| 26pt | 34.7px | 2.167rem | 2.167em | Titulo grande en web |
| 30pt | 40px | 2.5rem | 2.5em | H1 / Hero title |
| 36pt | 48px | 3rem | 3em | Display text, titulos impactantes |
| 48pt | 64px | 4rem | 4em | Titulos heroicos, landing pages |
| 72pt | 96px | 6rem | 6em | 1 pulgada de texto (raro en web) |
Formula de conversion rapida:
| Conversión | Formula |
|---|---|
| px → rem | rem = px / 16 (ej: 24px / 16 = 1.5rem) |
| rem → px | px = rem x 16 (ej: 1.5rem x 16 = 24px) |
| px → pt | pt = px x 0.75 (ej: 16px x 0.75 = 12pt) |
| pt → px | px = pt / 0.75 (ej: 12pt / 0.75 = 16px) |
| em → px | px = em x font-size del padre (ej: 1.5em con padre de 16px = 24px) |