Hojas de estilo CSS: selectores, cascada y modelo de caja

HTML describe el contenido y su significado. CSS, abreviatura de hojas de estilo en cascada, describe la presentación: colores, fuentes, espaciado, bordes y fondos. Cambiar una hoja de estilo puede dar al mismo HTML un aspecto diferente sin cambiar sus encabezados, párrafos ni enlaces.

Lee una regla

p {
  color: navy;
  font-size: 18px;
}

El selector p coincide con los párrafos. Las llaves encierran el bloque de declaraciones. Cada declaración tiene una propiedad, dos puntos, un valor y un punto y coma. Aquí, color y font-size son propiedades; navy y 18px son valores. Los saltos de línea y los espacios entre estas partes facilitan la lectura del código sin cambiar su efecto.

El punto y coma separa una declaración de la siguiente. El último es opcional, pero conservarlo evita errores cuando añades otra línea. En color: navy font-size: 18px;, el navegador lee un único valor de color no válido. No puede recuperar las dos declaraciones que querías escribir, por lo que ese texto no establece ninguno de los dos estilos.

Vincula el CSS

Una hoja de estilo externa es un archivo CSS independiente vinculado desde el head del HTML:

<link rel="stylesheet" href="css/styles.css">

Esta ruta significa que una carpeta llamada css está junto al archivo HTML y contiene styles.css. Un archivo externo puede aplicar estilos a varias páginas. Al guardar un cambio en él, se actualizan las reglas que cargan esas páginas.

Un elemento style en el head contiene reglas para una página. Un atributo style en línea contiene declaraciones para un elemento, como <p style="color: crimson;">Hello.</p>. Las hojas de estilo externas suelen ser más fáciles de mantener. Las declaraciones normales en línea también prevalecen sobre las reglas normales de las hojas de estilo del autor, lo que puede dificultar cambios posteriores.

Para obtener un primer resultado, coloca body { font-family: Arial, sans-serif; } y h1 { color: darkslateblue; } en el archivo vinculado. Recarga la página. El texto principal usa Arial donde esté disponible, con una fuente sin serifa como alternativa; el encabezado cambia de color. Los controles como los botones pueden conservar su propia fuente del navegador hasta que indiques expresamente que la hereden.

Detecta errores de sintaxis y de ruta

Los navegadores omiten las declaraciones no válidas y continúan. color: 12px; no es válido porque una longitud no es un color. font-size: 16 px; no es válido porque el número y la unidad deben ir juntos. Una propiedad mal escrita también se ignora. Una declaración de borde válida en el mismo bloque puede seguir funcionando, por lo que un cambio visible no demuestra que todas las declaraciones sean válidas.

Los comentarios de CSS usan /* Header styles */ y pueden ocupar varias líneas. // no inicia un comentario de CSS; puede hacer que se omita el código que sigue. Los nombres de propiedades y los valores de palabras clave habituales no distinguen entre mayúsculas y minúsculas; por convención, escríbelos en minúsculas. Los nombres de clase y las rutas de archivo deben coincidir con su escritura y sus mayúsculas y minúsculas reales.

Si no aparece ningún estilo, comprueba la solicitud en el panel Red. Una ruta incorrecta como style.css puede devolver 404 aunque la propia página HTML se abra con normalidad.

Trata las propiedades abreviadas como configuraciones completas

Una propiedad abreviada establece varias propiedades relacionadas a la vez. margin: 10px 20px; establece los cuatro márgenes. Las partes omitidas vuelven a sus valores iniciales: background-image: url("sky.jpg"); seguido de background: lightblue; elimina la imagen. Coloca primero la propiedad abreviada y después las excepciones individuales que deban conservarse.

Una página HTML sin estilos sigue teniendo encabezados grandes, espaciado entre párrafos, marcadores de lista y enlaces subrayados. Estos proceden de la hoja de estilo del agente de usuario, el CSS integrado del navegador. Tus estilos parten de estos valores predeterminados; una página sin estilos propios no es una página sin reglas CSS.

Elige el significado antes que el aspecto

Los valores predeterminados habituales incluyen un margen de 8px en el cuerpo, márgenes verticales de 1em en los párrafos y un relleno inicial de 40px en las listas. Los valores predeterminados de los encabezados incluyen 2em para h1 y 1.5em para h2, con márgenes verticales de 0.67em para h1. El texto de importancia destacada aparece en negrita; el texto con énfasis aparece en cursiva. Los enlaces no visitados suelen ser azules y los visitados, morados. La configuración y las implementaciones de los navegadores pueden afectar a los valores predeterminados, así que inspecciona la página real cuando necesites precisión.

El tamaño de texto predeterminado suele ser 16px, con una fuente elegida en la configuración del navegador. Los lectores pueden cambiar ese tamaño. Los tamaños de fuente relativos pueden seguir su elección.

Elige un elemento HTML por su significado y después aplícale estilos. Si un h2 parece demasiado grande, usa h2 { font-size: 1.25rem; }. Elegir un h4 solo por tener una letra más pequeña cambiaría la estructura de encabezados. Cambiar el tamaño en CSS mantiene intacto el significado del encabezado de segundo nivel.

Los valores predeterminados también determinan cómo ocupan espacio los elementos. Los párrafos y las secciones normalmente forman cajas de bloque. Los elementos span y los enlaces normalmente fluyen dentro de las líneas. Los elementos de lista tienen display: list-item, lo que les da una caja de nivel de bloque y un marcador. Un cambio de display en CSS altera el comportamiento de la caja y conserva el significado HTML del elemento.

Restablece solo lo que quieras

Un restablecimiento de estilos elimina determinados valores predeterminados. body { margin: 0; } elimina el espacio exterior. Una regla general como * { margin: 0; padding: 0; } también elimina el espaciado de los párrafos y la sangría de las listas, que después tendrás que volver a definir. Un enfoque de normalización conserva los valores predeterminados útiles y ajusta las diferencias.

Los controles de formulario suelen tener fuentes del navegador asignadas directamente. Para que coincidan con la página, escribe:

button, input, select, textarea {
  font: inherit;
}

Comienza el documento HTML con <!DOCTYPE html>. Esta declaración selecciona el modo de estándares. Omitirla puede activar el modo de compatibilidad, en el que el comportamiento de compatibilidad antiguo cambia algunos tamaños y otros resultados de CSS.

Inspecciona la propiedad que te sorprende

Haz clic derecho en un elemento y elige Inspeccionar. El panel Estilos muestra las reglas que coinciden, incluidas las reglas del navegador etiquetadas como estilos del agente de usuario. Una declaración tachada ha perdido frente a otra declaración; una advertencia puede señalar CSS no válido. Las declaraciones que prevalecen se eligen propiedad por propiedad, así que una regla puede perder su color y seguir aportando su relleno.

El panel de estilos calculados muestra los valores finales de las propiedades y el contenido, relleno, borde y margen del modelo de caja. Si un encabezado tiene un espacio inesperado, inspecciona su margen antes de añadir relleno a otro elemento. Prueba un cambio directamente en las herramientas de desarrollo y después copia la regla que funciona en tu hoja de estilo: las ediciones realizadas durante la inspección desaparecen al recargar.

Cuando un estilo falle, sigue un orden útil: comprueba que la hoja de estilo se ha cargado, que el selector coincide, que la declaración es válida, que prevalece y que la propiedad afecta a ese tipo de caja. Un width: 200px válido sigue sin dimensionar un span en línea ordinario.

Un selector responde a una pregunta práctica: ¿qué elementos deben recibir estas declaraciones? Comienza con el selector más sencillo que exprese la función deseada. Una clase puede reutilizarse en muchos elementos sin vincular el estilo a una posición concreta de la página.

Selecciona nombres y atributos

Un selector de tipo es el nombre de un elemento. Un selector de clase empieza con un punto; un selector de ID empieza con #. Estos signos forman parte del selector CSS, no del valor del atributo HTML. Escribe <p class="warning">, no <p class=".warning">.

Un elemento puede tener varias clases separadas por espacios. Tanto <p class="warning"> como <div class="box warning"> coinciden con .warning. Un ID debe ser único dentro de una página. Su alta especificidad también dificulta reemplazar los estilos basados en ID, por lo que las clases suelen ser la principal herramienta para aplicar estilos reutilizables.

Usa nombres que describan una función, como .error-message o .product-card. Un nombre como .red-text resulta engañoso si el diseño cambia a otro color. Los nombres de clase distinguen entre mayúsculas y minúsculas: .Warning y .warning son distintos. Un nombre que comienza con un dígito necesita un escape en un selector CSS; elegir .three-columns evita la forma no válida sin escape .3-columns.

Exige varias condiciones en un mismo elemento

Al escribir selectores juntos se forma un selector compuesto. El mismo elemento debe cumplir todas las partes. p.intro coincide con párrafos que tienen la clase intro. .card.featured coincide con un elemento que tiene ambas clases.

<p class="note important">Doors open at 19:00.</p>
<p class="note">Bring your ticket.</p>

.note { color: #333333; }
.important { font-weight: bold; }
p.note.important { border-left: 4px solid crimson; }

Primero busca las coincidencias. Ambos párrafos tienen note, por lo que ambos reciben texto gris oscuro. Solo el primero tiene important, por lo que solo él aparece en negrita. El selector compuesto añade el borde izquierdo a ese mismo primer párrafo porque es un p con ambas clases. No se necesita ningún contenedor adicional.

Un espacio cambia la tarea: p .intro selecciona un elemento con la clase intro dentro de un párrafo. No selecciona el párrafo en sí. Mantén las partes juntas cuando describan el mismo elemento.

Comparte un bloque de declaraciones

Una coma crea una lista de selectores:

h1, h2, h3 { font-family: Georgia, serif; }

Cada selector coincide de forma independiente con su nivel de encabezado. Sin las comas, h1 h2 h3 buscaría un h3 dentro de un h2 dentro de un h1.

Un selector no válido en una lista de selectores ordinaria puede invalidar toda la regla. h1, h2..title, h3 no aplica estilos a ninguno de esos encabezados porque el punto doble no es válido. Cuando parezca que falta una regla compartida, comprueba todos los selectores de la lista, no solo el correspondiente al elemento que inspeccionaste.

Algunas condiciones para aplicar estilos ya están presentes en los atributos HTML. Otras dependen de lo que hace el lector o de la posición de un elemento entre sus hermanos. CSS puede seleccionar estas condiciones sin añadir una clase para cada una.

Selecciona un atributo o su valor

Los selectores de atributo usan corchetes. [alt] coincide cuando el atributo está presente, aunque su valor esté vacío. input[type="email"] exige el valor exacto del atributo.

Añade i antes del corchete de cierre para ignorar las mayúsculas y minúsculas, como en a[href$=".pdf" i]. También selecciona un enlace que termina en .PDF. La coincidencia de palabra completa evita que note coincida por accidente con una palabra de clase más larga, como notebook.

Selecciona un estado o una posición

Una pseudoclase usa dos puntos: :hover, :focus, :checked o :disabled. :focus-visible selecciona un elemento con foco cuando el navegador determina que se necesita un indicador visible, normalmente durante la navegación con teclado.

Un enlace puede estar visitado y tener el puntero encima al mismo tiempo. Para reglas que compiten con la misma especificidad, escribe los estados del enlace en este orden: :link, :visited, :focus, :hover, :active. De lo contrario, una regla posterior para el color de visitado prevalecería sobre una regla anterior para el color al pasar el puntero en un enlace visitado. Por privacidad, los navegadores restringen :visited a ciertos cambios de color; establecer su grosor de fuente no funciona y la transparencia no puede revelar el historial de visitas.

Las pseudoclases estructurales cuentan hermanos. :first-child significa el primer elemento hijo de su padre. En <article><h2>News</h2><p>Update</p></article>, p:first-child no coincide con nada. p:first-of-type sí coincide con ese párrafo.

:nth-child(3) selecciona el tercer hijo. odd selecciona las posiciones 1, 3, 5; even selecciona 2, 4, 6. En :nth-child(3n+1), empieza con n = 0, después 1, 2 y 3: las posiciones seleccionadas son 1, 4, 7 y 10. li:not(:last-child) excluye el último elemento, lo que resulta útil para colocar separadores solo entre elementos.

Aplica estilos a una parte o añade una indicación

Un pseudoelemento usa dos pares de dos puntos. ::first-line y ::first-letter aplican estilos a partes del texto; ::marker a marcadores de lista, ::placeholder al texto de ayuda de un campo y ::selection al texto seleccionado. Las formas más antiguas con un solo par de dos puntos para before, after, first-line y first-letter siguen funcionando.

.required::after {
  content: " *";
  color: crimson;
}

::after crea contenido dentro del elemento seleccionado, después de su contenido existente. ::before lo crea antes. Ambos necesitan un valor de content; incluso content: "" crea una caja decorativa. El texto esencial debe estar en el HTML, donde sigue siendo contenido real del documento. Usa estos pseudoelementos para decoración o pequeñas indicaciones, ya que el texto generado no se puede seleccionar ni copiar de forma fiable como el texto HTML.

Los elementos HTML forman un árbol. Un elemento situado directamente dentro de otro es su hijo; cualquier elemento anidado dentro de él es un descendiente. Los elementos que comparten un padre son hermanos. Un combinador conecta selectores mediante una de estas relaciones.

Sigue la relación hasta el elemento seleccionado

La parte situada más a la derecha nombra el elemento que recibe las declaraciones. h2 + p aplica estilos al párrafo, no al encabezado. Ambos combinadores de hermanos buscan hacia adelante entre los hermanos; ninguno selecciona un padre ni un hermano anterior.

Sigue una lista anidada

<ul class="menu">
  <li>Guides</li>
  <li>Topics
    <ul>
      <li>Typography</li>
    </ul>
  </li>
</ul>

.menu li coincide con los tres elementos de lista porque los tres son descendientes de la lista exterior. .menu > li coincide solo con «Guides» y «Topics»: su padre es la lista con la clase menu. El padre del elemento «Typography» es el ul interior, que no tiene esa clase.

Esta distinción importa cuando los elementos del nivel superior necesitan mucho relleno, pero los elementos anidados necesitan un espaciado compacto. Un selector de descendiente alcanza todas las profundidades salvo que otra condición lo limite.

Sigue los hermanos posteriores

<article>
  <h2>Opening hours</h2>
  <p>Visit in the morning.</p>
  <aside>Closed on holidays.</aside>
  <p>Booking is optional.</p>
</article>

h2 + p coincide con el primer párrafo, «Visita por la mañana». No salta el aside para buscar otro párrafo. h2 ~ p coincide con ambos párrafos porque ambos siguen al encabezado y comparten su padre. Si un párrafo estuviera dentro del aside, no sería hermano del encabezado y, por esa razón, no coincidiría con ninguno de los dos selectores.

Combina relaciones sin abarcar demasiado

.sidebar > ul a:hover coincide con enlaces que tienen el puntero encima en cualquier lugar dentro de un ul cuyo padre directo tiene la clase sidebar. Léelo desde la derecha: un enlace con el puntero encima; dentro de una lista; esa lista directamente dentro de la barra lateral. El espacio permite elementos intermedios entre la lista y el enlace.

Los combinadores no añaden especificidad. Las partes del selector correspondientes a elementos, clases, ID y otras condiciones sí la añaden. Por eso, las cadenas largas pueden dificultar el mantenimiento de las reglas aunque los símbolos de relación no sumen puntos: cambiar el anidamiento del HTML puede hacer que dejen de coincidir. Una clase descriptiva en el elemento seleccionado, como .menu-link, suele expresar una función reutilizable con más claridad.

Cuando una regla no coincida, inspecciona el árbol real en lugar de contar los espacios visuales. Dos elementos pueden aparecer uno junto a otro en pantalla mientras tienen padres distintos en el HTML. Los comentarios y los espacios en blanco no cuentan como elementos hermanos para estos combinadores.

La cascada elige una declaración que prevalece para cada propiedad de cada elemento. No elige una regla completa y descarta todas las demás. Con p { color: gray; font-size: 18px; } y .lead { color: black; }, un párrafo con la clase lead puede tomar su color de la regla de clase y su tamaño de la regla de tipo.

Compara en el orden correcto

Primero elimina las declaraciones que no se aplican: sus selectores deben coincidir y deben cumplirse las condiciones. Después compara el origen y la importancia, incluida la prioridad de la capa de cascada. Los estilos normales en línea del autor prevalecen sobre las reglas normales de sus hojas de estilo. Cuando las declaraciones sigan empatadas en estas etapas anteriores, compara la especificidad; usa el orden de aparición si persiste el empate.

Dos reglas .button de igual prioridad que establecen distintos colores de fondo se resuelven por orden: prevalece la posterior. Las hojas de estilo vinculadas más adelante en el HTML también aparecen más tarde para estos empates. Que un archivo llegue más rápido por la red no hace que aparezca más tarde en la cascada.

Comprende la importancia antes de añadirla

Una declaración en línea como style="color: purple;" prevalece sobre los selectores normales de las hojas de estilo del autor, incluso los que tienen ID. Una declaración de una hoja de estilo del autor con !important puede prevalecer sobre esa declaración normal en línea.

<p class="note" style="color: purple;">Check the time.</p>

p { color: gray !important; }
.note { color: blue; }

El párrafo es gris. La importancia se compara antes que la especificidad del selector o la ventaja normal del estilo en línea. Si el color en línea también tiene !important, esa declaración importante en línea prevalece sobre la regla importante de la hoja de estilo del autor.

Para las declaraciones importantes, la prioridad de los orígenes se invierte: las declaraciones importantes del navegador prevalecen sobre las importantes del usuario, que prevalecen sobre las importantes del autor. Esto protege las reglas que los lectores o navegadores deben imponer. Dentro de un mismo origen, la prioridad del estilo en línea y de la capa sigue estando por delante de la especificidad y el orden en el código fuente.

Usar !important para cada conflicto hace que reemplazar estilos sea cada vez más difícil. Prefiere un selector más sencillo o un orden deliberado. Reemplazar reglas de terceros que no puedes editar puede justificar una declaración importante; debe ser una excepción meditada.

Agrupa reglas en capas de cascada

@layer reset, base, components;
@layer base {
  p { margin: 0 0 1rem; }
}

Esto declara el orden de las capas antes de sus reglas. Para las declaraciones normales, las capas posteriores prevalecen sobre las anteriores independientemente de la especificidad del selector. Las reglas normales fuera de cualquier capa prevalecen sobre las reglas normales en capas. Por tanto, una regla de componente de baja especificidad puede reemplazar una regla base de alta especificidad sin añadir ID.

Las declaraciones importantes invierten ese orden de capas: las capas anteriores prevalecen sobre las posteriores y las declaraciones importantes en capas prevalecen sobre las importantes sin capa. Esta inversión conserva las protecciones importantes de las capas fundamentales. Al investigar un conflicto, determina qué grupo de origen, importancia y capa prevalece antes de dedicar tiempo a contar las partes del selector.

La especificidad mide el peso de selección de un selector. Compárala solo entre las declaraciones que sigan empatadas en las etapas anteriores de la cascada, incluidos el origen, la importancia y la prioridad de la capa y del estilo en línea.

Cuenta tres columnas

Escribe la especificidad como ID-CLASE-TIPO, por ejemplo 0-1-1.

El selector universal * y los combinadores no suman nada. Para a[href^="https"]:focus, cuenta ningún ID, dos partes de CLASE (el atributo y :focus) y una parte de TIPO (a). El resultado es 0-2-1.

Más ejemplos: .nav a es 0-1-1; ul li a:hover es 0-1-3; #main .card > h2 es 1-1-1; article p::first-line es 0-0-3. Un pseudoelemento cuenta en la columna TIPO aunque su nombre empiece con dos pares de dos puntos.

Compara desde la izquierda

Compara primero los ID. Si empatan, compara CLASE; si estos empatan, compara TIPO. Solo las ternas iguales pasan a compararse por el orden en el código fuente. Son recuentos separados, no cifras de un número decimal: 0-11-0 sigue perdiendo frente a 1-0-0. Las clases adicionales no se trasladan a la columna ID.

<nav id="site-nav">
  <a class="active" href="/">Home</a>
</nav>

#site-nav a { color: white; }
nav a.active { color: orange; }
.active { color: yellow; }

Supón que son declaraciones normales de la misma capa del autor. Sus puntuaciones son 1-0-1, 0-1-2 y 0-1-0. La primera prevalece, por lo que el enlace es blanco. Su columna ID resuelve la comparación antes de que importen los recuentos de clases o tipos.

#site-nav .active prevalecería con 1-1-0, pero un diseño basado en clases es más fácil de ampliar: .site-nav a puede proporcionar el estilo base y .site-nav .active cambiar el enlace activo. Esto mantiene la especificidad baja y bastante uniforme.

Conoce las excepciones funcionales

:is(), :not() y :has() no suman peso por la función en sí. Su argumento más específico aporta el peso. Así, li:not(.done) es 0-1-1 y :is(#intro, p) a es 1-0-1. Cuenta el selector más específico de la lista de argumentos, no el que parezca visualmente más cercano al elemento.

:where() y todo lo que contiene siempre aportan cero. Por eso, :where(#main) p tiene una puntuación de 0-0-1. Es útil para valores predeterminados que deben ser fáciles de reemplazar.

La distancia a un antecesor no cuenta. Tanto body h1 como html h1 tienen una puntuación de 0-0-2, por lo que una declaración posterior resuelve su empate. Los estilos en línea se tratan antes de la especificidad de los selectores y !important pertenece a la importancia. Ninguno de los dos es otra parte ordinaria del selector que se deba sumar a la terna.

La herencia permite que un hijo reciba un valor de su padre cuando esa propiedad se hereda normalmente y ninguna declaración proporciona un valor distinto al hijo. Por eso, una sola regla para el cuerpo puede establecer el color de texto y la fuente de gran parte de una página.

Distingue el texto heredado de la configuración de caja

La mayoría de las propiedades de texto se heredan: color, las propiedades de fuente, line-height, letter-spacing, text-align y text-transform. Los estilos de lista y visibility también se heredan. Las propiedades de caja como margen, relleno, borde, ancho, altura, fondos, visualización y cálculo del tamaño de la caja no se heredan.

body { color: #222222; font-family: Georgia, serif; }
h1, h2 { font-family: Arial, sans-serif; }
footer { color: #666666; }

El texto ordinario del cuerpo usa Georgia en gris oscuro. Los encabezados reciben la familia de fuentes asignada directamente y conservan el color heredado. El texto del pie de página hereda Georgia mientras su color cambia localmente.

El fondo transparente de un hijo deja ver el fondo del padre; eso no significa que el hijo haya heredado el color de fondo. Del mismo modo, los hijos de una caja con borde no reciben automáticamente sus propios bordes.

Las asignaciones directas prevalecen sobre los valores heredados

Con #content { color: red; } y p { color: blue; }, un párrafo dentro del área de contenido es azul. La especificidad del ID no compite con la regla del párrafo porque las declaraciones seleccionan elementos distintos. El párrafo ya tiene un color asignado directamente, por lo que no necesita el rojo heredado.

Los hijos suelen heredar valores calculados. Si una sección tiene font-size: 20px y su hijo tiene font-size: 0.8em, el valor calculado de ese hijo es 16px. Un párrafo dentro de él hereda 16px; no vuelve a multiplicar por 0.8. Una altura de línea sin unidad es útil porque el valor heredado sigue siendo un multiplicador del tamaño de fuente de cada hijo.

Elige qué significa un restablecimiento

En el CSS del autor, revert deja que se apliquen los estilos de origen de usuario o del navegador. La diferencia importa en un div: display: initial da el valor inicial inline de la propiedad, mientras que display: revert restaura su visualización block habitual del navegador. Un valor inicial pertenece a la propiedad CSS; un valor predeterminado del navegador puede depender del elemento HTML.

inherit funciona incluso en una propiedad que normalmente no se hereda, como border: inherit. button, input { font: inherit; } reemplaza las fuentes asignadas directamente a los controles por la fuente de su padre. all: unset restablece casi todas las propiedades a la vez, lo que también elimina un aspecto integrado útil.

Una excepción aparente es el subrayado. text-decoration no se hereda, pero el subrayado de un padre se dibuja a través de sus descendientes en línea. Establecer text-decoration: none en un span anidado no puede borrar la línea del padre. Elimínala del padre y aplícala solo al texto que deba llevarla.

color establece el color del texto. Los fondos, bordes, contornos, decoraciones y sombras también aceptan valores de color. Un mismo color puede escribirse de varias formas; elige una notación que facilite comprender el cambio deseado.

Interpreta nombres y canales hexadecimales

CSS tiene unos 150 colores con nombre, entre ellos navy, tomato y rebeccapurple. Los nombres son prácticos para pruebas rápidas, pero su significado cotidiano puede sorprenderte: green es #008000, mientras que el verde puro brillante es lime, o #00ff00. Los valores exactos eliminan esa incertidumbre.

Un color hexadecimal de seis dígitos tiene tres pares de canales: rojo, verde y azul. Cada par va de 00 a ff, equivalente a los valores de 0 a 255. Todos los valores en cero dan negro; todos al máximo dan blanco. Los pares iguales producen un gris, como en #808080.

La notación hexadecimal de tres dígitos duplica cada dígito: #f0a se expande a #ff00aa. No añade ceros. Un color como #1e90ff no puede abreviarse porque no todos los pares repiten su dígito. Las letras hexadecimales mayúsculas y minúsculas representan los mismos valores.

Para convertir un par, multiplica su primer dígito por 16 y suma el segundo. Las letras de la a a la f representan los valores del 10 al 15. Para #1e90ff, 1e da 30, 90 da 144 y ff da 255. La notación RGB equivalente es rgb(30 144 255). El código más antiguo puede usar comas o rgba(); esas formas siguen funcionando.

Describe el tono o la transparencia

hsl() indica el tono, la saturación y la luminosidad. El tono es un ángulo: 0 o 360 es rojo, 120 verde y 240 azul. La saturación va del gris al 0 % al color pleno al 100 %. La luminosidad va del negro al 0 % al blanco al 100 %. Un tono puro tiene una saturación del 100 % y una luminosidad del 50 %, como en hsl(0 100% 50%). Cambiar solo la luminosidad crea versiones oscuras y pálidas relacionadas.

Un valor alfa va después de una barra: rgb(0 0 0 / 0.6) es negro con un 60 % de opacidad. Cero es totalmente transparente y uno totalmente opaco. La notación hexadecimal de ocho dígitos añade un par para el alfa: #00000080 tiene 128 de 255, aproximadamente un 50 % de alfa. transparent es totalmente transparente.

.notice {
  color: white;
  background-color: rgb(0 0 0 / 0.6);
}

Aquí solo el fondo es parcialmente transparente. opacity: 0.6, en cambio, haría parcialmente transparente todo el elemento, incluidos su texto y sus hijos. La diferencia importa cuando quieres texto opaco y legible sobre una superficie coloreada.

Reutiliza el color y comprueba el resultado

currentColor significa el color de texto del propio elemento. Con color: #0055aa; border: 2px solid currentColor;, el borde sigue el color del texto. Cambiar el color del texto también cambia ese borde sin repetir un valor de color.

El nivel AA de las WCAG 2.2 exige al menos 4,5:1 de contraste para texto normal y 3:1 para texto grande, de unos 24px o unos 18,5px en negrita. #767676 sobre blanco da aproximadamente 4,54:1; #999999 sobre blanco da aproximadamente 2,85:1 y no cumple ninguno de los dos umbrales. Usa un comprobador de contraste o las herramientas de color del navegador con el par real de color de primer plano y fondo, incluido el efecto de la transparencia.

Una longitud combina un número con una unidad, como 16px o 1.5rem. No hay espacio entre ellos. Un ancho distinto de cero necesita una unidad: width: 300; no es válido. El cero puede omitir su unidad. Algunas propiedades aceptan deliberadamente números sin unidad, entre ellas line-height: 1.5, opacity: 0.8 y font-weight: 700.

Relaciona la unidad con su referencia

Un píxel CSS no es necesariamente un punto físico de la pantalla. Las pantallas de alta densidad pueden usar varios píxeles del dispositivo para un píxel CSS. Las relaciones fijas entre unidades incluyen 1in = 96px = 2,54cm y 1pt = 1/72in. Así, 12pt equivalen a 16px y 1cm equivale aproximadamente a 37,8px. Esas conversiones no garantizan una medida física en todas las pantallas.

Calcula valores relativos a la fuente

Supón que un padre tiene una fuente de 16px y su hijo tiene font-size: 1.25em; padding: 2em;. Calcula primero el tamaño de fuente: 1,25 por 16px da 20px. El relleno usa entonces el tamaño del propio hijo, por lo que 2 por 20px da 40px en cada lado.

Los tamaños de fuente en em anidados pueden acumularse. Con li { font-size: 1.25em; }, tres niveles anidados que parten de 16px pasan a ser 20px, 25px y 31,25px. En cambio, 1.25rem da 20px en cada nivel cuando la raíz es de 16px.

Dejar el tamaño raíz en el valor predeterminado del navegador, o establecerlo como porcentaje, permite que el texto relativo responda cuando un lector cambie ese valor predeterminado. Un html { font-size: 16px; } fijo anula esa configuración. Un patrón práctico es usar rem para el tamaño de fuente y em para el relleno de un botón, de modo que su espaciado crezca con su propio texto.

Comprueba los porcentajes y el área de visualización

La propiedad determina la referencia del porcentaje. Un bloque contenedor proporciona una referencia para el tamaño de la caja; en estos ejemplos de flujo normal suele ser el área de contenido del padre. Un hijo con width: 40% en un bloque contenedor de 600px mide 240px de ancho antes de añadir cualquier relleno o borde con el modelo content-box. font-size: 150% usa el tamaño de fuente del padre. Incluso el relleno y los márgenes porcentuales superior e inferior usan el ancho del bloque contenedor, no su altura.

1vw es el 1 % del ancho del área de visualización; 1vh es el 1 % de su altura. En un área de visualización de 1280 por 800 píxeles CSS, 50vw equivale a 640px y 10vh a 80px. 100vw puede incluir el ancho de la barra de desplazamiento y producir desbordamiento horizontal donde el 100% del padre sí cabría.

max-width: 65ch da a una columna de texto un ancho relacionado con la fuente. Es una medida aproximada de longitud de lectura, no una garantía de que cada línea tenga exactamente 65 caracteres.

Combina unidades con un cálculo

width: calc(100% - 40px); resta una cantidad fija de un tamaño relativo. Mantén los espacios alrededor de + y -; calc(100%-40px) no es válido. Los navegadores calculan las longitudes relativas a la fuente en píxeles, mientras que los porcentajes del tamaño del contenedor se resuelven durante el cálculo de la disposición. Las herramientas de desarrollo muestran los tamaños resultantes para que puedas comprobar tanto la referencia como la operación.

De dentro hacia fuera, una caja tiene contenido, relleno, borde y margen. El contenido incluye texto, imágenes o elementos hijos. El relleno crea espacio alrededor de ese contenido. El borde rodea el relleno; el margen separa la caja hasta el borde de sus vecinas.

Un fondo rellena el contenido y el relleno y se extiende por debajo del borde, pero nunca colorea el margen. Usa relleno cuando el espacio deba formar parte de una tarjeta de color. Usa margen para el espacio exterior. Los márgenes pueden ser negativos; el relleno no.

Interpreta las propiedades abreviadas de espaciado

margin, padding y border-width aceptan de uno a cuatro valores:

El orden de cuatro valores sigue el sentido de las agujas del reloj desde arriba. Usa propiedades individuales como padding-left para cambiar un solo lado después de la propiedad abreviada. No interpretes el segundo valor de una forma de dos valores como el inferior: establece ambos lados horizontales.

Calcula la caja de contenido predeterminada

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

El valor inicial de box-sizing es content-box. El ancho declarado de 300px cubre solo el contenido. Suma dos veces 20px de relleno y dos veces 5px de borde: la caja hasta el borde mide 350px de ancho. Suma los dos márgenes de 10px para obtener 370px de espacio horizontal.

La altura funciona igual cuando se establece explícitamente, pero el texto suele necesitar una caja que pueda crecer. Dejar height: auto evita encerrar contenido cambiante en una altura fija.

Incluye el relleno y el borde en el ancho

Con box-sizing: border-box, el mismo ancho declarado incluye el relleno y el borde. La caja hasta el borde sigue midiendo 300px; resta 40px de relleno y 10px de borde para obtener un área de contenido de 250px. Los márgenes permanecen fuera y dan un espacio horizontal de 320px.

Un restablecimiento habitual aplica este modelo a los elementos y a sus partes generadas:

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

box-sizing no se hereda automáticamente, por lo que la regla selecciona las cajas directamente.

Un hijo de ancho completo permite ver la diferencia con facilidad. En un contenedor de 600px, width: 100%; padding: 0 20px; da una caja hasta el borde de 640px con el cálculo content-box, antes de añadir cualquier borde. Con el cálculo border-box, el mismo ancho declarado de 600px incluye el relleno y cabe en el contenedor.

Deja que el contenido quepa sin problemas

min-height establece un límite inferior y permite que la caja crezca. max-width: 800px permite que un bloque de ancho automático se reduzca en un contenedor estrecho e impide que supere los 800px de ancho.

Si el contenido supera una caja fija, overflow controla el resultado: visible deja que se desborde, hidden lo recorta, scroll solicita barras de desplazamiento y auto permite el desplazamiento cuando es necesario. pre { overflow: auto; } da a una línea larga de código su propia área de desplazamiento. Recortar no es una buena solución para texto que los lectores siguen necesitando; comprueba primero si el tamaño fijo es necesario.

Usa el diagrama de caja del panel de estilos calculados para comparar los valores de contenido, relleno, borde y margen del navegador con tu cálculo.

El tipo de visualización determina cómo se integra una caja en su entorno. Un bloque normalmente comienza en una línea nueva y ocupa el ancho disponible cuando su ancho es automático. Una caja en línea ordinaria fluye dentro del texto y se dimensiona según su contenido. Una caja de bloque en línea conserva la posición en línea y acepta dimensiones explícitas.

Elige el comportamiento que necesitas

En elementos en línea ordinarios como span y a, los márgenes superior e inferior no tienen efecto. El relleno y los bordes verticales se dibujan, pero no separan las líneas vecinas, por lo que pueden superponerse a ellas. El relleno, los bordes y los márgenes horizontales sí ocupan espacio a lo largo de la línea.

nav a {
  display: inline-block;
  padding: 8px 16px;
}

Estos enlaces permanecen en una línea mientras sus cajas con relleno reservan espacio vertical. display: block daría a cada enlace su propia línea. Las imágenes son un caso especial en línea: aceptan ancho y altura. Su alineación predeterminada con la línea base puede dejar un pequeño espacio debajo para los trazos descendentes de las letras; img { display: block; } elimina ese espacio de la línea base.

display: none elimina la caja y su espacio, y hace que los lectores de pantalla no la lean. visibility: hidden la oculta y conserva su espacio.

Centra una caja o centra su contenido

.page {
  max-width: 960px;
  margin: 0 auto;
}

En un contenedor más ancho, el bloque deja de crecer a los 960px y los dos márgenes horizontales automáticos reparten por igual el espacio restante. Un bloque que ocupa todo el contenedor no tiene espacio horizontal sobrante que repartir. Los márgenes automáticos no centran una caja en línea ordinaria y los márgenes verticales automáticos en el flujo normal de bloques se resuelven en cero.

text-align: center cumple otra función: centra el contenido en línea dentro de un bloque. Una caja de párrafo centrada puede seguir teniendo el texto alineado a la izquierda; un párrafo de ancho completo puede tener el texto centrado sin convertirse en una caja más estrecha y centrada.

Reconoce el colapso de márgenes verticales

En el flujo normal de bloques, los márgenes superior e inferior contiguos pueden colapsar. Dos márgenes positivos se convierten en el mayor de los dos. Un encabezado con un margen inferior de 24px seguido de un párrafo con un margen superior de 16px tiene un espacio de 24px, no de 40px. Los márgenes horizontales no colapsan.

Con márgenes positivos y negativos, combina el mayor positivo con el más negativo: 20px y −8px se convierten en 12px. Si todos son negativos, prevalece el más negativo. Una caja vacía sin contenido, altura, borde ni relleno que los separe puede hacer colapsar sus propios márgenes superior e inferior.

El margen superior de un primer hijo también puede colapsar a través de un padre sin borde, relleno ni contenido anterior que los separe. Entonces el espacio aparece fuera del fondo del padre. Añade relleno o un borde al padre, o elimina el margen superior del hijo. Unas condiciones similares permiten que colapse el margen inferior del último hijo; una altura o altura mínima del padre puede impedir este último caso.

Los márgenes de las cajas de bloque en línea no colapsan, como tampoco lo hacen los de los elementos flex o de cuadrícula ni los de las cajas flotantes o posicionadas de forma absoluta. Un patrón sencillo de espaciado de texto establece los márgenes superiores en cero y usa márgenes inferiores, con relleno para el espacio dentro de los contenedores.

Elegir una fuente implica tener un plan alternativo. Los dispositivos tienen distintas fuentes instaladas y una fuente descargada puede llegar después del texto. Una lista de fuentes alternativas mantiene la página legible y conserva un estilo adecuado.

Crea una lista de fuentes

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

El navegador prueba los nombres de familia en orden y usa una fuente disponible. Pon comillas a los nombres que contienen espacios. Deja las familias genéricas sin comillas: "sans-serif" solicita una fuente con ese nombre exacto; sans-serif pide al navegador una fuente genérica adecuada.

Las opciones genéricas incluyen serif, sans-serif, monospace, cursive, fantasy y system-ui. La última usa la fuente de interfaz del sistema. Las fuentes que suelen llamarse seguras para la web, como Arial, Georgia y Verdana, son comunes, pero no están garantizadas. Aun así, debe haber una familia genérica como alternativa al final.

font-size acepta longitudes, porcentajes y palabras clave de tamaño. Con una raíz de 16px, 1rem da 16px y 2.5rem da 40px. Los tamaños relativos pueden seguir la configuración del lector.

Establece con cuidado el grosor, el estilo y la propiedad abreviada

font-weight: normal equivale a 400; bold equivale a 700. Valores como 300 y 600 solicitan otros grosores cuando la fuente los proporciona. Si falta el grosor solicitado, el navegador elige uno disponible o puede generar una negrita artificial. Si solo están cargados 400 y 700, solicitar 300 usa 400. bolder y lighter son relativos al padre.

font-style: italic solicita una variante en cursiva; normal elimina ese estilo. La propiedad abreviada font necesita tanto el tamaño como la familia:

blockquote {
  font: italic 700 1.125rem/1.6 Georgia, serif;
}

El estilo, la variante y el grosor opcionales van antes del tamaño. Una barra une la altura de línea al tamaño y la familia va al final. Omitir el tamaño o la familia invalida la propiedad abreviada. Las demás configuraciones de fuente omitidas se restablecen: font: 1rem Arial, sans-serif; devuelve un grosor anterior en negrita al valor normal.

Carga un archivo de fuente

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", Arial, sans-serif; }

@font-face asigna a un archivo un nombre de familia CSS. Usa ese nombre declarado en la lista, no el nombre del archivo. Las rutas relativas de los archivos parten de la ubicación de la hoja de estilo. WOFF2 es un formato comprimido compatible con los navegadores actuales.

Las fuentes estáticas suelen necesitar archivos y reglas independientes para cada grosor y estilo. Las fuentes variables pueden contener un intervalo de grosores en un solo archivo. Carga los archivos que el diseño realmente use. font-display: swap muestra una fuente alternativa de inmediato y la reemplaza cuando la fuente web está disponible.

Un servicio de fuentes puede proporcionar un enlace HTML y la declaración de familia; alojar la fuente en tu propio servidor evita solicitarla a un servidor de terceros. Comprueba que la licencia permita usarla en sitios web. Si la fuente no tiene el aspecto esperado, inspecciona la fuente renderizada y la solicitud del archivo. Un nombre de familia CSS mal escrito activa una alternativa sin avisar, por lo que el texto legible por sí solo no demuestra que se haya cargado la fuente deseada.

Los estilos de texto deben adaptarse a los cambios de tamaño, contenido y método de entrada. Comienza con el interlineado y anchos legibles; después añade detalles a las listas y los enlaces que indiquen a los lectores cómo funciona el contenido.

Deja que la altura de línea siga cada tamaño de fuente

Usa una altura de línea sin unidad, como line-height: 1.5. Con texto principal de 16px crea líneas de 24px. Los hijos heredan el número, por lo que un encabezado de 32px obtiene líneas de 48px. En cambio, un valor de 1.5em o 150% en el padre se calcula allí como 24px, y un hijo puede heredar esa altura de línea fija de 24px aunque su propio texto sea mayor. El valor predeterminado normal depende de la fuente y suele rondar 1,2.

body { font: 1.125rem/1.6 Georgia, serif; color: #222222; }
h1 { font: 700 2.25rem/1.2 Arial, sans-serif; }
p { max-width: 65ch; }

Con una raíz de 16px, el texto principal mide 18px con líneas de 28,8px; el encabezado mide 36px con líneas de 43,2px. El límite del párrafo evita líneas muy largas en una pantalla ancha.

text-align posiciona el contenido en línea dentro de un bloque. Sus valores incluyen left, right, center, justify, start y end; start y end siguen la dirección de escritura. No mueve el bloque en sí. La justificación en columnas estrechas puede crear espacios grandes entre palabras.

Cambia la presentación sin reescribir el texto

text-transform puede mostrar palabras en mayúsculas, minúsculas o con iniciales mayúsculas sin cambiar el texto HTML. letter-spacing, word-spacing y text-indent controlan distintos tipos de espacio. text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); indica desplazamiento horizontal, desplazamiento vertical, desenfoque y color.

text-decoration añade subrayados, líneas superiores o tachados. También puede establecer el estilo y el color, como en underline wavy crimson. El grosor y la separación del subrayado permiten ajustar la línea. Los lectores esperan que el texto subrayado sea un enlace, así que reserva esa indicación para los enlaces.

Aplica estilos a las listas sin dejar sangría accidental

list-style-type elige marcadores como disc, square, decimal o lower-alpha. list-style-position: outside mantiene los marcadores fuera del bloque de texto; inside los coloca en la primera línea, por lo que las líneas que continúan pueden comenzar debajo del marcador. list-style-image proporciona un marcador de imagen y li::marker puede colorear solo el marcador.

Para una lista de navegación sencilla, usa .menu { list-style: none; margin: 0; padding: 0; }. Eliminar solo los marcadores deja el relleno inicial predeterminado de la lista. list-style: square inside es una propiedad abreviada que combina configuraciones del marcador.

Mantén visibles los enlaces durante su uso

Ordena las reglas de estado de igual especificidad como link, visited, focus, hover, active. Un enlace puede estar visitado y tener el puntero encima a la vez; el orden en el código fuente decide entre sus declaraciones de color. :active significa durante la activación, no la página actual.

Mantén los enlaces reconocibles por algo más que el color, normalmente con un subrayado en el texto corriente. Proporciona un indicador claro del foco del teclado:

a:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

No elimines el contorno de foco salvo que otro estilo de foco visible lo sustituya. Un contorno no ocupa espacio en el modelo de caja, por lo que esta indicación no desplaza el texto circundante.

Un fondo se sitúa detrás del contenido de una caja. Su color rellena el contenido y el relleno y se extiende por debajo del borde; el margen permanece transparente. Una imagen se dibuja encima del color de fondo, por lo que un color puede proporcionar una superficie fiable mientras se carga la imagen.

Resuelve la ruta desde la hoja de estilo

.hero {
  background-color: #1a2b3c;
  background-image: url("../images/hero.jpg");
}

Si el CSS está en css/styles.css y la imagen está en la carpeta images del nivel principal del sitio, .. sale de css antes de entrar en images. Una URL de imagen en CSS parte del archivo CSS, a diferencia del enlace a la hoja de estilo, que parte del archivo HTML. Comprueba la solicitud de la imagen si una regla válida solo muestra su color alternativo.

Los fondos son decoración. Un lector de pantalla no los anuncia como imágenes. Coloca una imagen informativa en el HTML con texto alternativo significativo. Un color alternativo cercano al tono principal de la imagen también ayuda a que el texto siga siendo legible si la imagen tarda en cargar o falta.

Controla la repetición, la escala y la posición

Inicialmente, las imágenes se repiten a su tamaño natural. no-repeat usa una copia; repeat-x crea una fila y repeat-y una columna. space distribuye mosaicos completos con espacios entre ellos, mientras que round ajusta los mosaicos para que quepa un número entero.

Para una caja de 800px por 400px y una imagen cuadrada de 1000px, cover escala la imagen a un cuadrado de 800px, dejando 400px de altura de la imagen fuera de la caja. Contain la escala a un cuadrado de 400px; con no-repeat, quedan 400px del ancho de la caja sin cubrir. Establecer solo contain no desactiva la repetición.

La posición inicial es la parte superior izquierda. background-position: center centra una imagen; right 20px bottom 10px la desplaza desde esos bordes. El valor horizontal va primero. Center junto con cover mantiene visible el centro cuando es necesario recortar.

Genera y superpone imágenes

Un degradado es una imagen, así que colócalo en background-image:

background-image: linear-gradient(to right, #1e90ff, #8a2be2);

El primer color está a la izquierda y el segundo a la derecha. Los ángulos y las paradas con posición ofrecen más control; radial-gradient(circle, white, steelblue) se extiende desde el centro hacia fuera. Un degradado en background-color no es válido.

Separa varias imágenes con comas; la primera queda encima. Un degradado negro translúcido colocado antes de una foto puede oscurecer la imagen sin hacer transparente el texto.

Usa la propiedad abreviada de forma deliberada

background: url("hero.jpg") center / cover no-repeat #1a2b3c; combina una imagen, posición, tamaño, repetición y color. El tamaño sigue a la posición después de una barra. Solo la última capa puede tener un color. Las configuraciones de fondo omitidas se restablecen, por lo que un background: white; posterior elimina una imagen anterior.

background-attachment usa inicialmente scroll, que se mueve con el elemento al desplazarse la página. fixed mantiene el fondo unido al área de visualización. Prueba la caja y el texto reales después de añadir decoración; el escalado y el recorte no deben ocultar información que los lectores necesitan.

Un borde forma parte del modelo de caja. Un contorno o una sombra se dibuja alrededor de la caja sin reservar espacio adicional. Elegir entre ellos cambia tanto el aspecto como el comportamiento de dimensionamiento de un estilo.

Da un estilo al borde

.note {
  border: 1px solid #cccccc;
  border-left: 4px solid crimson;
  padding-left: 12px;
}

La propiedad abreviada establece ancho, estilo y color; estas partes pueden aparecer en cualquier orden. El estilo de borde inicial es none, por lo que establecer solo el ancho y el color no produce un borde visible. Entre los estilos están solid, dashed, dotted, double, groove, ridge, inset y outset, así como none y hidden.

Si se omite el ancho, se usa medium, que suele ser 3px en los navegadores actuales. Si se omite el color, se usa currentColor, que coincide con el texto del elemento. Las propiedades abreviadas para un lado, como border-top, y las propiedades individuales, como border-left-color, permiten añadir una excepción después de un borde general. Por ejemplo, border-top: none elimina solo el borde superior después de una declaración para los cuatro lados.

Con el cálculo content-box, un borde de 2px en cada lado añade 4px al ancho y a la altura. Por eso, aumentar el ancho del borde al pasar el puntero puede desplazar el contenido cercano. Mantén estable el ancho del borde y cambia su color, o usa un contorno como indicación que no ocupa espacio. Con el cálculo border-box, un borde más grueso ocupa más espacio dentro de la caja declarada.

Redondea las esquinas en un orden predecible

border-radius: 8px redondea todas las esquinas incluso cuando el borde es invisible. Con cuatro valores, el orden es superior izquierda, superior derecha, inferior derecha, inferior izquierda. Dos valores se aplican a pares de esquinas opuestas: el primero a superior izquierda e inferior derecha, y el segundo a superior derecha e inferior izquierda.

border-radius: 50% hace circular una caja cuadrada y elíptica una rectangular. Su propio fondo se recorta hasta ese borde redondeado. El radio por sí solo no recorta el contenido hijo que se desborda; esa es una decisión independiente de desbordamiento. El radio no se suma a las dimensiones medidas de la caja.

Añade una línea de foco o profundidad

.link:focus-visible {
  outline: 3px solid navy;
  outline-offset: 2px;
}

Un contorno se dibuja fuera del borde y no ocupa espacio en la disposición. Su separación crea un espacio respecto al borde. Es una indicación útil del foco porque puede aparecer sin mover las cajas vecinas.

box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); proporciona un desplazamiento horizontal de cero, un desplazamiento de 2px hacia abajo, un desenfoque de 6px y un color negro translúcido. Un valor opcional de extensión va después del desenfoque. inset dibuja la sombra por dentro; los valores separados por comas añaden varias sombras. Las sombras siguen las esquinas redondeadas y no añaden espacio al modelo de caja.

Comprueba una tarjeta terminada

Una tarjeta con width: 280px; padding: 16px; border: 1px solid #dddddd; mide 314px de ancho con el cálculo content-box. Suma a 280px dos veces 16px y dos veces 1px. Con el cálculo border-box sigue midiendo 280px y deja 246px para el contenido. Un radio de esquina de 12px y una sombra suave no cambian ninguno de los dos cálculos. Cambian el borde dibujado, no las dimensiones usadas para colocar otras cajas.