Cómo ver y cambiar CSS

Kayce Basques

Sofia Emelianova

Completa estos instructivos interactivos para aprender los conceptos básicos de ver y cambiar el CSS de una página con Chrome DevTools.

Cómo ver el CSS de un elemento

1. Haz clic con el botón derecho en el texto Inspect me! que aparece a continuación y selecciona Inspeccionar. Se abrirá el panel Elements de DevTools.

   Inspeccioname

2. Observa el elemento Inspect me! destacado en azul en el árbol del DOM.

   

3. En el Árbol DOM, busca el valor del atributo data-message para el elemento Inspect me!.

4. Ingresa el valor del atributo en el cuadro de texto que aparece a continuación.

5. En la pestaña Elementos > Estilos, busca la regla de la clase aloha.

   En la pestaña Styles, se enumeran las reglas de CSS que se aplican a cualquier elemento que se seleccione en el árbol del DOM, que debería ser el elemento Inspect me!.

6. La clase aloha declara un valor para padding. Ingrese este valor y su unidad sin espacios en el cuadro de texto a continuación.

Si deseas acoplar la ventana de DevTools a la derecha del viewport, como en la captura de pantalla del paso uno, consulta Cómo cambiar la posición de DevTools.

Agrega una declaración de CSS a un elemento

Usa la pestaña Styles cuando quieras cambiar o agregar declaraciones de CSS a un elemento.

1. Haz clic con el botón derecho en el texto Add a background color to me! que aparece a continuación y selecciona Inspeccionar.

   Agrégame un color de fondo.

2. Haz clic en element.style cerca de la parte superior de la pestaña Estilos.

3. Escribe background-color y presiona Intro.

4. Escribe honeydew y presiona Intro. En el árbol del DOM, puedes ver que se aplicó una declaración de estilo intercalado al elemento.

Agrega una clase CSS a un elemento

Usa la pestaña Styles para ver cómo se ve un elemento cuando se aplica o quita una clase de CSS.

1. Haz clic con el botón derecho en el elemento Add a class to me! que aparece a continuación y selecciona Inspeccionar.

   ¡Agrega una clase para mí!

2. Haz clic en .cls. DevTools muestra un cuadro de texto en el que puedes agregar clases al elemento seleccionado.

3. Escribe color_me en el cuadro de texto Agregar clase nueva y, luego, presiona Intro. Aparecerá una casilla de verificación debajo del cuadro de texto Add new class, en la que puedes activar o desactivar la clase. Si el elemento Add a class to me! tuviera alguna otra clase aplicada, también podrías activarlas o desactivarlas desde aquí.

Agrega un pseudoestado a una clase

Usa la pestaña Styles para aplicar un pseudoestado de CSS a un elemento.

1. Coloca el cursor sobre el texto Hover over me! que aparece a continuación. Cambia el color de fondo.

   Coloca el cursor sobre mí.

2. Haz clic con el botón derecho en el texto Hover over me! y selecciona Inspeccionar.

3. En la pestaña Estilos, haz clic en :hov.

4. Marca la casilla de verificación :hover. El color de fondo cambia como antes, aunque no estés sobre el elemento.

Para obtener más información, consulta Cómo activar o desactivar una seudoclase.

Cambia las dimensiones de un elemento

Usa el diagrama interactivo Modelo de cuadro en la pestaña Styles para cambiar el ancho, la altura, el padding, el margen o la longitud del borde de un elemento.

1. Haz clic con el botón derecho en el elemento Change my margin! que aparece a continuación y selecciona Inspeccionar.

   Cambia mi margen.

2. Para ver el modelo de cuadro, haz clic en el botón Mostrar barra lateral en la barra de acciones de la pestaña Diseños.

3. En el diagrama Modelo de cuadro de la pestaña Estilos, coloca el cursor sobre padding. El padding del elemento se destaca en el viewport.

4. Haz doble clic en el margen izquierdo del modelo de cuadro. Actualmente, el elemento no tiene márgenes, por lo que margin-left tiene un valor de -.

5. Escribe 100 y presiona Intro.

El modelo de cuadro usa píxeles de forma predeterminada, pero también acepta otros valores, como 25% o 10vw.