Documentación de CSS
Referencia concisa y basada en ejemplos de CSS. Lee el concepto, mira el código y practícalo en un recorrido de Coddy.
Empezar el cursoPrimeros pasos
- CSS en líneaEl CSS en línea pone las declaraciones directamente en un elemento con el atributo style. Aprende la sintaxis, cuándo conviene usar estilos en línea, por qué ganan a las hojas de estilo y cómo se comparan con el CSS interno y externo.
- CSS externoEl CSS externo vive en un archivo .css que cada página vincula con <link rel="stylesheet">; el CSS interno va en un elemento <style> dentro de una página. Aprende ambos, cómo funcionan las rutas de archivo y qué regla gana cuando se encuentran.
- Comentarios CSSCSS tiene una sola sintaxis de comentario, /* ... */, para una o varias líneas. Aprende dónde pueden ir los comentarios, cómo comentar una regla y por qué // y los comentarios anidados rompen en silencio la regla siguiente.
- !important!important hace que una declaración gane a las declaraciones normales, sea cual sea su especificidad. Aprende exactamente a qué le gana, qué le gana a él, cómo funciona la especificidad por debajo y las formas más limpias de ganar un conflicto de estilos.
- Variables CSSLas variables CSS (custom properties) guardan un valor una vez y lo reutilizan con var(). Aprende a declararlas en :root, a limitar su alcance y sobrescribirlas, a darles un valor por defecto, a cambiar de tema con JavaScript y a evitar la trampa del valor inválido.
Selectores
- Selectores CSSUn selector CSS elige los elementos a los que una regla da estilo. Aprende todos los tipos de selectores, los cuatro combinadores (descendiente, hijo, hermano adyacente, hermano general), los selectores de atributo y la agrupación, y prueba selectores en vivo.
- Selector de claseEl selector de clase (.nombre) da estilo a todos los elementos con esa clase; el selector de ID (#nombre) da estilo al único elemento con ese id. Aprende la sintaxis, varias clases y clases encadenadas, clase vs id, reglas de nombres y cómo alternar clases con JavaScript.
- Pseudoclases CSSLas pseudoclases seleccionan elementos por posición o por estado: :nth-child(), :first-child, :not(), :focus, :checked, :has() y más. Aprende la sintaxis, la fórmula an+b con un probador en vivo y la diferencia entre nth-child y nth-of-type.
- ::before y ::after::before y ::after insertan contenido generado como primer y último hijo de un elemento, directamente desde CSS. Aprende la propiedad content, por qué hace falta un content vacío, cómo posicionarlos, tooltips con attr(), contadores y dónde no funcionan.
- Hover en CSSLa pseudoclase :hover da estilo a un elemento mientras el puntero está encima. Aprende efectos hover para botones y tarjetas, transiciones suaves, colores de enlaces con :link, :visited, :hover y :active en el orden correcto, y el hover en pantallas táctiles.
Modelo de caja
- Modelo de cajaCada elemento es una caja de cuatro capas: contenido, padding, borde y margin. Aprende cuánto suma cada capa al tamaño, cómo cambia el cálculo box-sizing: border-box y mira cada capa medida en vivo.
- Padding en CSSEl padding es el espacio dentro de un elemento, entre su contenido y su borde. Aprende la abreviatura padding con 1 a 4 valores, las propiedades de cada lado, el padding lógico, los porcentajes y cómo el padding cambia el tamaño de un elemento.
- Margin en CSSEl margin es el espacio transparente fuera del borde de un elemento que aleja a los demás elementos. Aprende la abreviatura margin, a centrar con margin: 0 auto, los márgenes negativos, margin auto en flexbox y por qué colapsan los márgenes verticales.
- Margin vs paddingEl padding es el espacio dentro del borde de un elemento; el margin es el espacio fuera de él. Míralos en la misma caja, lado a lado y en vivo, y aprende cuál usar para fondos, áreas de clic, espacio entre elementos y centrado.
- Bordes en CSSLa propiedad border dibuja una línea alrededor del padding de un elemento. Aprende la abreviatura border, todos los estilos de borde, colores y lados sueltos, esquinas redondeadas con border-radius y en qué se diferencian los bordes de los outlines.
- Width y heightwidth y height definen el tamaño de la caja de un elemento. Aprende los tamaños fijos y en porcentaje, por qué height: 100% a menudo no hace nada, min-height y max-width para layouts flexibles, auto vs 100% y las palabras clave fit-content.
Texto y fuentes
- Tamaño de letraLa propiedad font-size define qué tan grande es el texto. Aprende las unidades que acepta (px, rem, em, %, palabras clave, vw), cómo cambiar el tamaño de letra en HTML, por qué rem es la opción segura y cómo se acumulan los tamaños en em.
- Font-weightLa propiedad font-weight pone el texto en negrita, fino o en cualquier punto intermedio. Aprende la escala numérica de 100 a 900, normal y bold, los relativos bolder y lighter, y por qué a veces un peso no muestra ningún cambio.
- Line-heightline-height define la altura de cada línea de texto y, con ella, el espacio entre líneas. Aprende por qué un número sin unidad es la opción correcta por defecto, cómo se heredan de forma distinta los valores en px, em y %, y buenos valores para el texto del cuerpo y los títulos.
- Color de textoLa etiqueta <font color> está obsoleta; el color del texto en HTML se define con la propiedad CSS color. Aprende a darle color a toda una página, a una palabra, a un enlace o a un título, con nombres de colores, hex y rgb, y a mantener el texto legible.
- Subrayado en CSSSubraya texto con text-decoration y luego controla la línea: su color, estilo, grosor y distancia al texto. También cómo quitar el subrayado de los enlaces, y cuándo no deberías hacerlo.
- Sombra de textotext-shadow dibuja una o varias sombras detrás del texto. Aprende los cuatro valores (desplazamiento x, desplazamiento y, desenfoque, color), cómo apilar sombras para efectos de brillo, contorno y 3D, y cómo usar una sombra para que el texto se lea sobre fondos recargados.
Colores y fondos
- Colores CSSTodas las formas de escribir un color en CSS: colores con nombre, códigos hex, rgb() y rgba(), hsl(), transparencia con un canal alfa, currentColor y los más nuevos oklch() y color-mix(). Cada uno con un ejemplo en vivo y un conversor.
- Color de fondobackground-color rellena la caja de un elemento con un color. Aprende a poner el color de fondo de toda una página, un div, una fila de tabla o una palabra, cómo funciona la transparencia, por qué bgcolor está obsoleto y en qué se diferencia background-color de la abreviatura background.
- Imagen de fondobackground-image pone una imagen o un degradado detrás del contenido de un elemento. Aprende url() y los degradados, background-size (cover y contain), background-position, background-repeat, varias capas de fondo y la abreviatura background.
- Degradados CSSLos degradados de CSS son imágenes que el navegador dibuja a partir de colores. Aprende radial-gradient (forma, tamaño, posición), linear-gradient (dirección y ángulos), conic-gradient, las paradas de color, las paradas nítidas para rayas, los degradados repetidos y el texto con degradado.
- Box-shadowbox-shadow dibuja sombras alrededor de la caja de un elemento. Aprende los cinco valores (x, y, desenfoque, expansión, color), las sombras inset, cómo apilar varias sombras para una profundidad realista, los anillos de foco hechos con spread y los errores que hacen que las sombras se vean sucias.
Maquetación
- Display en CSSLa propiedad display decide cómo participa un elemento en el layout. Aprende block, inline e inline-block con cajas medidas lado a lado, display none vs visibility hidden, y dónde encajan flex, grid, flow-root y contents.
- Position en CSSposition: absolute coloca un elemento en coordenadas exactas dentro de su ancestro posicionado más cercano. Aprende cómo funciona absolute junto con position: relative, luego fixed y sticky, las propiedades top/right/bottom/left e inset, y por qué sticky a veces no se queda fijo.
- Z-index en CSSz-index decide qué elemento superpuesto se dibuja encima. Aprende en qué elementos funciona, cómo los contextos de apilamiento agrupan elementos de modo que un z-index de 9999 todavía puede perder, qué crea un contexto de apilamiento y cómo arreglar un z-index que no funciona.
- Overflow en CSSoverflow decide qué pasa con el contenido que no cabe en su caja: mostrarlo, recortarlo o agregar barras de desplazamiento. Aprende visible, hidden, scroll, auto y clip, overflow-x y overflow-y, los puntos suspensivos en el texto y los efectos secundarios de overflow en el layout.
- Float y clearfloat empuja un elemento hacia un lado y deja que el texto lo rodee, como se colocan las fotos en una revista. Aprende float left, right e inline-start, clear, por qué un padre colapsa alrededor de los floats y cómo lo arregla display: flow-root, y por qué los floats ya no se usan para el layout de la página.
- Centrar un divTodas las formas de centrar un div en horizontal, en vertical o en ambos ejes: flexbox, grid, margin auto, posición absoluta con transform, inset con margin auto y align-content. Cada una se ejecuta en vivo y mide su propio centrado, con una tabla de cuándo usar cada una.
- Centrar una imagenUn <img> es inline, así que se centra como el texto: text-align: center en su padre. O conviértela en bloque con margin: 0 auto, o céntrala con flexbox o grid, también en vertical. Cada método se ejecuta en vivo y mide el resultado.
Flexbox y Grid
- Flexbox en CSSFlexbox coloca elementos en una fila o una columna y controla cómo comparten el espacio y cómo se alinean. Aprende display: flex, el eje principal y el transversal, todas las propiedades del contenedor, flex-grow, flex-shrink y flex-basis, con un playground en vivo que mide dónde queda cada elemento.
- Justify-contentjustify-content coloca los elementos flex a lo largo del eje principal y align-items a lo largo del eje transversal. Mira todos los valores lado a lado, medidos, con una cuadrícula de alineación clicable, align-self y las razones por las que a veces justify-content no hace nada.
- Flex-wrapflex-wrap decide si los elementos flex se aprietan en una sola línea o pasan a la siguiente, y flex-direction decide si van en fila o en columna. Aprende los dos con ejemplos en vivo, la abreviatura flex-flow, align-content y una fila de tarjetas responsive sin media queries.
- CSS GridCSS grid coloca elementos en filas y columnas a la vez. Aprende display: grid, grid-template-columns, la unidad fr, repeat() y minmax(), auto-fill vs auto-fit, cómo colocar elementos con grid-column y grid-template-areas, con un grid en vivo que editas y mides.
Diseño responsive
- Media queriesUna media query aplica CSS solo cuando una condición es verdadera, como un ancho mínimo de pantalla, un esquema de color oscuro o un puntero de mouse. Aprende la sintaxis @media, los breakpoints mobile first, la sintaxis de rangos, prefers-color-scheme, matchMedia en JavaScript y las container queries.
- Unidades CSSrem es relativo al tamaño de letra de la raíz, em al tamaño de letra del propio elemento, px es fijo y % depende de la propiedad. Mira cada unidad medida en una demo anidada, por qué em se acumula, cuándo usar cada una y cómo funcionan vw, vh y dvh.
- clamp() en CSSclamp(MIN, PREFERIDO, MAX) devuelve el valor preferido, pero nunca menos que MIN ni más que MAX. Aprende cómo hace fluidos los tamaños de letra y los espaciados sin media queries, cómo calcular el valor del medio y cómo se relaciona con min() y max().
- calc() en CSScalc() te permite hacer cuentas en CSS y mezclar unidades, como el 100% menos una barra lateral fija de 200px. Aprende las reglas de sintaxis (los espacios importan), calc() con variables CSS, los layouts habituales que resuelve y por qué un calc() inválido se ignora en silencio.
Transiciones y efectos
- Transiciones CSSUna transición CSS anima una propiedad de su valor anterior al nuevo cuando cambia, por ejemplo en hover. Aprende la abreviatura transition, todas las funciones de tiempo lado a lado, qué se puede animar y qué no, el truco para height: auto y el movimiento reducido.
- Animaciones CSSLas animaciones CSS llevan un elemento por los pasos que defines en @keyframes, solas y tantas veces como quieras. Aprende la sintaxis de @keyframes, las ocho propiedades de animation, fill-mode y direction, indicadores de carga, cómo pausarlas y cómo respetar el movimiento reducido.
- Transform en CSSLa propiedad transform mueve, escala, rota e inclina un elemento sin cambiar el layout a su alrededor. Aprende todas las funciones de transform, por qué importa el orden de las funciones, transform-origin, las propiedades separadas translate, scale y rotate, y el truco de centrado translate(-50%, -50%).
- Rotar con CSSRota un elemento con transform: rotate(45deg) o con la propiedad más nueva rotate. Aprende las unidades de ángulo (deg, turn, rad), a rotar alrededor de una esquina con transform-origin, a rotar texto e íconos, un loader que gira y la rotación 3D con rotateX y rotateY.
- Opacidad en CSSopacity hace transparente todo un elemento y todo lo que contiene, de 0 (invisible) a 1 (sólido). Aprende los valores, por qué opacity también desvanece el texto y cómo hacer transparente solo el fondo, opacity: 0 vs visibility vs display, y los desvanecidos en hover.
- Blur y filterfilter: blur(5px) desenfoca un elemento, y backdrop-filter: blur() desenfoca lo que hay detrás. Aprende todas las funciones de filter (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) con controles deslizantes en vivo, cómo combinarlas y el problema de los bordes desenfocados.
