Curso de CSS / inspeccionar y modificar estilos con DevTools

Las herramientas de desarrollo del navegador te permiten inspeccionar qué declaraciones de CSS coinciden con un elemento y qué valores se utilizan finalmente. Styles explica las reglas que coinciden y las que son sobrescritas, mientras que Computed te ayuda a revisar los valores de propiedad resultantes; las ediciones en DevTools son normalmente temporales.

Prepara el ejemplo y el resultado esperado

Guarda todo el código a continuación como index.html en formato UTF-8 y ábrelo en tu navegador. En este ejemplo, el párrafo de horario de atención se muestra en verde y el primer párrafo general se muestra en gris. El aviso tiene un relleno de 16px y un fondo claro para comparar el efecto de cada propiedad.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Dado que colocamos el CSS en el elemento style junto con el HTML del cuerpo, la fuente del ejercicio es un solo archivo. Si ya estás practicando con CSS externo, puedes poner la misma regla en style.css, pero el nombre del archivo y el número de línea que se muestran en las herramientas de desarrollo serán diferentes. Después de confirmar que el texto esperado aparece en la pantalla, abre las herramientas de desarrollo.

Selecciona el elemento correcto en Elements

1. Haz clic derecho en la frase «We open at 9 a.m. every day.» y elige Inspect (Inspeccionar). En Chrome o Edge en Windows, también puedes abrir DevTools con F12 o Ctrl+Shift+I.
2. En la pestaña Elements, comprueba que la línea seleccionada sea <p class="notice">. Si otro elemento está seleccionado, activa la herramienta de selección de elementos y vuelve a seleccionar el aviso. La ubicación de las herramientas y el idioma del menú pueden variar según el navegador/versión.
3. Abre Styles junto al elemento seleccionado o debajo de él. Observa que tanto las reglas .notice como p son visibles. En ventanas estrechas, los paneles pueden colocarse en la parte inferior o algunas pestañas pueden quedar en el menú de desbordamiento.

Lo que Elements expone es el Modelo de Objetos del Documento (DOM), que es la estructura del documento interpretada por el navegador. No siempre se ve igual que el código fuente de la página. Cuando un navegador corrige HTML incorrecto o JavaScript reemplaza un elemento, la selección real debe determinarse en función de la estructura que se muestra en Elements.

El diagrama resume la relación entre las reglas de coincidencia en Styles y el valor final en Computed. Es una ilustración explicativa, no una captura de pantalla de una nueva prueba. En DevTools, abre Computed y filtra por color para inspeccionar el mismo valor. Los paneles pueden aparecer en diferentes lugares dependiendo del diseño y la versión del navegador.

Compara Styles y Computed

Styles muestra reglas que coinciden con el elemento seleccionado, estilos en línea escritos directamente en el elemento y reglas relacionadas con la herencia. Tanto p { color: #666; } como .notice { color: #087f5b; } coinciden con el aviso, pero el color final del texto es verde. Esto se debe a que el selector de clase tiene mayor precedencia que el selector de elemento en la misma condición de origen/importancia/capa en este ejemplo.

Si ves un tachado en una declaración de color gris, primero verifica la posibilidad de que no sea “la sintaxis estaba mal” sino más bien “otra declaración ganó”. El significado de los tachados y los signos de advertencia puede variar según la ubicación y la situación, así que coloca el cursor sobre la declaración y lee la explicación. padding: 16px es una propiedad separada de color, así que incluso si hay un conflicto de color, pueden aplicarse juntos.

Computed se usa para verificar el estilo computado final del elemento seleccionado. Abre la pestaña e ingresa color en el filtro para encontrar el color del texto. #087f5b puede mostrarse como rgb(8, 127, 91), y son del mismo color. Expande una propiedad para rastrear reglas y fuentes relacionadas. Algunas propiedades pueden estar ocultas en la lista predeterminada, así que revisa también las opciones de visualización.

La documentación de funciones de CSS de Chrome DevTools explica los paneles y cómo editar declaraciones. Para entender por qué las declaraciones entran en conflicto, compara los ejemplos condicionales en CSS Herencia, Especificidad y la Cascada.

Activa o desactiva declaraciones y edita valores

1. En Styles, busca la declaración color: #087f5b de la regla .notice. Desmarcar la casilla junto a una declaración solo excluirá temporalmente esta declaración. Como resultado, confirma que el color del aviso cambie a gris para la regla p.
2. Vuelve a marcar la casilla para devolverla a su color verde original. Luego haz clic en el valor de color y cámbialo a #1d4ed8 y presiona Enter. Verifica que solo el texto del aviso cambie a azul y el color de fondo permanezca verde claro.
3. Revisa nuevamente el color del texto en Computed. Si dice rgb(29, 78, 216), coincide con el color azul que cambiaste. El fondo es una propiedad separada llamada background-color.
4. En este ejercicio no se configura la vinculación a archivos ni Local Overrides, por lo que cuando actualices, el color que cambiaste en Herramientas de Desarrollador desaparecerá y volverás al color verde original. Después de confirmar que el original no ha sido cambiado, procede al siguiente paso.

Las declaraciones desactivadas pueden restaurarse volviendo a activar la casilla, y los valores cambiados incorrectamente pueden restaurarse reingresando los valores existentes. Si deseas eliminar todos los demás cambios de una vez, actualiza sin activar la función de guardado, como en este ejercicio. Si has activado la vinculación de espacio de trabajo o la sobrescritura local, la forma en que se guarda y mantiene puede cambiar, por lo que no asumas que se restaurará con una actualización.

Guarda un cambio confirmado en el archivo fuente

Haz clic en el nombre del archivo de origen y el número de línea de una regla en Styles para localizarla. Debido a que este ejemplo incrusta CSS en HTML, edita la regla correspondiente en el index.html original. Para una hoja de estilo externa, abre el archivo indicado allí, como style.css. Comprueba la ruta antes de editar una copia con nombre similar. Para más detalles, consulta Aplicar CSS con Styles en Línea, Internos y Externos.

1. Abre en el editor el index.html que estás viendo en el navegador. Si tienes copias en varias carpetas, comprueba que la ruta coincida con la dirección del navegador.
2. Cambia el valor de color de la regla original .notice a #1d4ed8 y guarda.
3. Actualiza tu navegador. Ahora, si lo abres de nuevo y el aviso aparece en azul, se ha reflejado en el original.
4. Para volver al diseño original después de completar el ejercicio, restaura el color original en #087f5b y guarda/actualiza.

Distingue tres fallos comunes de CSS

Prueba cada situación por separado: cambia el archivo original, guarda, recarga, comprueba el resultado y restaura el valor anterior. En la primera situación, las reglas .notcie que no coinciden con el elemento seleccionado pueden no aparecer en la lista de reglas aplicadas comúnmente en Styles. En la tercera situación, la forma en que aparece la advertencia varía según dónde se haya creado y la versión del navegador. Dividiendo los casos en aquellos donde no hay regla, hay una regla pero ha sido sobrescrita, y la declaración misma es inválida, puedes identificar qué debes corregir.