CSS

Selecciona todos los elementos que tengan ese valor en su atributo class. Es el selector m…

Selecciona el elemento con ese valor en su atributo id. Un id debe ser unico en toda la pa…

Selecciona todos los elementos del documento. Se usa comunmente para resets, como quitar m…

Selecciona elementos que tengan un atributo especifico, opcionalmente con un valor exacto …

Selecciona B en cualquier nivel de profundidad dentro de A, sin importar cuantos elementos…

Selecciona B unicamente cuando es hijo directo de A, sin pasar por ningun elemento interme…

Selecciona B unicamente cuando aparece justo despues de A, al mismo nivel.

Selecciona todos los B que compartan el mismo padre que A y aparezcan despues de A, sin im…

Aplica estilos mientras el cursor esta sobre el elemento. Funciona sin JavaScript y respon…

Aplica estilos mientras un elemento de formulario tiene el foco del teclado o del cursor. …

Selecciona elementos segun su posicion entre sus hermanos, usando una formula: nth-child(2…

Insertan contenido generado antes o despues del contenido real de un elemento, definido co…

Selecciona los elementos que NO coinciden con el selector indicado dentro de los parentesi…

Seleccionan el primer o el ultimo elemento hijo dentro de su contenedor, sin necesidad de …

Define el color del texto de un elemento. Acepta nombres de color, hexadecimal, rgb(), hsl…

Define el color de fondo de un elemento, detras de su contenido y de su padding.

Controla la opacidad de un elemento completo, incluido su contenido, en un rango de 0 (inv…

Coloca una o mas imagenes o degradados como fondo de un elemento, encima de background-col…

Controla el tamanio de la imagen de fondo: cover la recorta para cubrir todo el elemento, …

Define en que parte del elemento se ubica la imagen de fondo: center, top right, o coorden…

Propiedad abreviada para definir el grosor, estilo y color del borde de un elemento en una…

Redondea las esquinas de un elemento. Un valor alto y simetrico en un elemento cuadrado pr…

Anade una o mas sombras alrededor del elemento: desplazamiento horizontal, vertical, difum…

Dibuja un contorno alrededor del elemento que no ocupa espacio en el layout, a diferencia …

Define el tipo de caja que genera un elemento: block, inline, flex, grid o none, entre otr…

Define como se posiciona un elemento: static (por defecto), relative, absolute, fixed o st…

Definen el desplazamiento de un elemento posicionado (relative, absolute, fixed o sticky) …

Controla el orden de apilado de elementos posicionados que se superponen: un numero mayor …

Definen el ancho y el alto de un elemento. Aceptan unidades fijas (px), relativas (%, vw, …

Limitan el ancho de un elemento hacia arriba o hacia abajo, incluso si su contenido o su w…

Define el espacio exterior de un elemento, fuera de su borde. Separa un elemento de los qu…

Define el espacio interior de un elemento, entre su contenido y su borde.

Define si el width y height de un elemento incluyen su padding y border (border-box) o no …

Controla que sucede cuando el contenido de un elemento no cabe en su area: visible, hidden…

Saca un elemento del flujo normal y lo empuja hacia un lado, dejando que el contenido sigu…

Convierte a un elemento en contenedor flexible: sus hijos directos se acomodan en una fila…

Define el eje principal de un contenedor flex: row (fila, por defecto), column, row-revers…

Distribuye los elementos flex a lo largo del eje principal: flex-start, center, space-betw…

Alinea los elementos flex a lo largo del eje transversal: stretch (por defecto), flex-star…

Define el espacio entre elementos dentro de un contenedor flex o grid, sin necesidad de ma…

Define el numero y el tamanio de las columnas de un contenedor grid, por ejemplo con valor…

Define la tipografia del texto, con una lista de opciones separadas por comas como respald…

Define el tamanio del texto. Puede usarse en px, rem, em o unidades relativas al viewport …

Define el grosor del trazo del texto, de 100 (muy fino) a 900 (muy grueso), o palabras cla…

Define si el texto se muestra en cursiva (italic), oblicua (oblique) o normal.

Define la altura de cada linea de texto. Un valor comodo para lectura suele estar entre 1.…

Alinea el texto dentro de su contenedor: left, right, center o justify.

Anade o quita lineas decorativas al texto: underline, line-through, overline o none.

Ajusta el espacio horizontal entre caracteres. Valores negativos acercan las letras, posit…

Cambia la capitalizacion visual del texto sin alterar el texto real: uppercase, lowercase …

Controla como se manejan los espacios en blanco y los saltos de linea dentro del texto: no…

Anima el cambio entre dos valores de una propiedad a lo largo de un tiempo determinado, en…

Aplica transformaciones geometricas a un elemento: rotate(), scale(), translate() o skew()…

Define el punto desde el cual se aplican las transformaciones, como rotate o scale. Por de…

Aplica una animacion definida con @keyframes a un elemento: nombre, duracion, funcion de t…

Define las etapas de una animacion mediante puntos porcentuales (0%, 50%, 100%), que luego…

Define el icono del puntero del mouse al pasar sobre un elemento: pointer, not-allowed, gr…

Aplica un bloque de estilos solo cuando se cumple una condicion, como un ancho maximo de p…

Declara una tipografia personalizada a partir de un archivo, para poder usarla con font-fa…

Importa reglas de otra hoja de estilos dentro de la actual. Debe ir al principio del archi…

Aplica un bloque de estilos solo si el navegador soporta la propiedad o el valor indicado.…

Centra el contenido y le asigna un ancho maximo responsivo, adaptandose a los breakpoints …

Controla si un elemento ocupa toda la linea o solo el espacio de su contenido.

Oculta un elemento por completo. Se combina con clases responsivas como md:flex para mostr…

Controla el comportamiento del contenido que excede el tamaño de su contenedor.

Convierte un contenedor en un flexbox, permitiendo alinear y distribuir sus hijos.

Define la direccion principal de los elementos flex: en fila o en columna.

Alinea los elementos a lo largo del eje principal: start, center, end, between, around, ev…

Alinea los elementos a lo largo del eje transversal: start, center, end, stretch.

Define el espacio entre los elementos de un contenedor flex o grid.

Convierte un contenedor en grid, permitiendo distribuir hijos en filas y columnas.

Define cuantas columnas tendra el grid. Se puede combinar con responsive: md:grid-cols-2.

Hace que un elemento ocupe varias columnas del grid.

Agrega espacio interno alrededor del contenido. p-4, px-4, py-4, pt-4, etc.

Agrega espacio externo alrededor del elemento. m-4, mx-auto, mt-2, etc.

Define el ancho del elemento. w-full, w-1/2, w-64, w-screen.

Define la altura del elemento. h-full, h-32, h-screen.

Cambia el tamaño de la fuente. text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, et…

Controla el grosor de la fuente: font-light, font-normal, font-bold, font-extrabold.

Alinea el texto: text-left, text-center, text-right, text-justify.

Cambia el color del texto. text-blue-500, text-red-600, text-gray-900.

Define el color de fondo del elemento. bg-blue-500, bg-gray-100, bg-white.

Define el color de los bordes. border-blue-500, border-gray-300.

Redondea las esquinas. rounded, rounded-md, rounded-full, rounded-lg.

Anade sombra al elemento. shadow, shadow-md, shadow-lg, shadow-none.

Controla la transparencia del elemento. opacity-0, opacity-50, opacity-100.

Aplica una clase solo a partir de un breakpoint. movil primero: sin prefijo es base, md: a…

Aplica estilos cuando el usuario pasa el cursor o enfoca el elemento.

Permite usar valores personalizados entre corchetes cuando los de la escala no sirven.

Crea fondos degradados con direccion y colores. bg-gradient-to-r, from-*, via-*, to-*.

Controla como una imagen o video se ajusta dentro de su contenedor: cover, contain, fill, …

Cambia el cursor del raton. cursor-pointer, cursor-not-allowed, cursor-text, cursor-wait.

Anade o quita un contorno alrededor del elemento. Util para indicar foco sin afectar el la…

Anade un anillo tipo box-shadow para enfocar elementos. ring-2, ring-offset-2, ring-color.

Define el esquema de posicionamiento del elemento. Se combina con inset-*, top-*, left-*, …

Controla la profundidad de apilamiento de elementos posicionados. z-0, z-10, z-50, z-auto.

Corta el texto largo con puntos suspensivos. Requiere overflow-hidden, whitespace-nowrap o…

Subraya, tacha o decora el texto. underline, line-through, no-underline, decoration-wavy, …

Mantiene una proporcion de aspecto fija: square, video, auto. Util para imagenes, videos o…

Controla cambios suaves entre estados. transition define las propiedades animadas, duratio…

Limita la transicion a ciertas propiedades: all, colors, transform, opacity, shadow. Por d…

Aplica transformaciones 2D a un elemento. Requiere la clase transform para activar las tra…

Incluye animaciones listas para usar: spin (giro continuo), ping (eco), pulse (parpadeo) y…

Aviso al navegador que un elemento se va a animar, para que optimice su renderizado. Usar …

Aplica un estilo cuando el usuario ha activado la preferencia de reducir movimiento en su …

Define la duracion de una transicion. Valores: 75, 100, 150, 200, 300, 500, 700, 1000 (en …

Retrasa el inicio de una transicion. Valores: 75, 100, 150, 200, 300, 500, 700, 1000 (en m…

Define la curva de aceleracion de una transicion. linear, in, out, in-out son las opciones…

Desactiva cualquier animacion aplicada al elemento. Util para anular animaciones heredadas…

Crea una animacion rapida usando valores arbitrarios entre corchetes. Reutiliza los keyfra…

Activa una animacion solo cuando el usuario pasa el cursor sobre el elemento. Combina con …

Cambia el punto de origen de una transformacion. origin-center, origin-top, origin-bottom-…

Aplica un estilo cuando el usuario NO ha activado la preferencia de reducir movimiento. Es…