Cómo extraer código CSS para una imagen usando las herramientas de desarrollador del navegador

¿Necesitas copiar el estilo exacto aplicado a una imagen en una página web? Las Herramientas de Desarrollo del Navegador hacen esto sencillo.

Método 1: Inspeccionar elemento (Más rápido)

1. Haz clic derecho en la imagen → Inspeccionar (o Inspeccionar elemento).
2. El panel de Elementos se abre con la etiqueta <img> resaltada.
3. Mira el panel Estilos (lado derecho). Verás todas las reglas CSS que afectan ese elemento, incluidas las heredadas.
4. Haz clic en cualquier regla para ver/editar; copia las declaraciones que necesites.

Método 2: Estilos computados (Valores finales renderizados)

1. Con la etiqueta <img> seleccionada en Elementos, cambia a la pestaña Computado (en el panel de Estilos).
2. Esto muestra el valor calculado final para cada propiedad CSS (después de cascada, herencia, consultas de medios).
3. Marca "Mostrar todo" para ver los valores predeterminados. Copia propiedades individuales o toda la lista.

Método 3: Copiar todo el conjunto de reglas

1. En el panel de Estilos, encuentra el selector que quieres (ej. .hero img o img[src="..."]).
2. Haz clic derecho en el selector → Copiar regla (o copia todo el bloque manualmente).

Flujo de trabajo de ejemplo

1. Abre la página con la imagen objetivo.
2. Haz clic derecho en la imagen → Inspeccionar.
3. En Elementos, selecciona la etiqueta <img>.
4. En Estilos, localiza la regla que establece width, border-radius, box-shadow, etc.
5. Copia esas declaraciones en tu propio archivo CSS.

Consejo: Si la imagen es un fondo CSS (background-image), inspecciona el elemento contenedor en su lugar.