Modificación de Estilos con el Inspector de Elementos en CSS

Una vez que realizamos los cambios en los estilos para depurar, es común olvidar cuales fueron todos los cambios que se realizaron en los estilos, para ello podemos acceder a la herramienta changes y observar estos cambios:

Aclaración:
Cuando el profesor habla sobre las pseudo-clases, dice que al seleccionar la opción de :hover se pueden ver todos los elementos en el HTML que tienen unos estilos aplicados al estado de hover.
Esto es un pequeño error, esa opción solo se aplica al elemento que se está manipulando, pero no a todo el HTML de la página.
El modelo de caja y el filtrado de estilos también es algo muy útil en esta pestaña de Styles, para que le echen un vistazo.
Un saludo.

También tenemos shortcuts para aumentar o disminuir el tamaño de los elementos:

Shift + flecha arriba o flecha abajo = modificas 10px el tamaño.
Ctrl + flecha arriba o flecha abajo = modificas 100px el tamaño.
Alt + flecha arriba o flecha abajo = modificas 0.1px el tamaño.

Úsenlo con sabiduría XD.

Esto es algo que me gusta mucho de las DevTools, puedes modificar en tiempo real y hacer todo hasta que quede a como quieres que quede. Sin embargo, hay que tener mucho cuidado al hacer esto cuando usas extensiones como Live Server, esto es porque cuando tu guardas algo en tu proyecto, Live Server recargará la página automáticamente, por lo que es posible que tus cambios hechos en DevTools se pierdan, así que hay que estar pendientes de ello

Para agregar una declaración CSS a un elemento use la pestaña Estilos cuando desee cambiar o agregar declaraciones CSS a un elemento.

• Haga clic derecho en el Add A Background Color To Me!texto a continuación y seleccione Inspeccionar .
• Haga clic element.stylecerca de la parte superior de la pestaña Estilos .
• Escribe background-color y presiona Enter.
• Escribe honeydewy presiona Enter. En el Árbol DOM , puede ver que se aplicó una declaración de estilo en línea al elemento.
  
  

Modificando los estilos (CSS)

En la sub-sección de Styles podemos ver todos los estilos que tiene el elemento que tenemos seleccionado, aquí podemos modificar los estilos que ya tienen aplicados o añadir nuevos estilos.

También podemos ver cómo se comporta un elemento cuando se activa una pseudo-class y también modificarla.

En la sub-sección Computed podemos ver todos los estilos que estrictamente solo se está aplicando a ese elemento seleccinado y podemos ver el modelo de caja también.

Es interesante saber que los bordes generalmente van de 1 a 3 px 🤔🤔

Con Live server pueden tener el servidor local desde visual studio

En Firefox hay una pestaña Editor de estilos en la que puedes importar y/o modificar las hojas de estilos que ya están cargadas. También puedes crear una nueva hoja de estilos

Y también hay una sección de CSS en el Inspector con la que puedes ver los cambios que haz hecho y luego copiarlos

Os comparto el código del clon de Google:

https://github.com/ceporro/Curso-pr-ctico-de-HTML-y-CSS/tree/master/Google clone

Un consejo que me dio un diseñador una vez, si no saben si realmente es el elemento que quieren modificar, por que hay muchos elementos juntos o transparentes… por más obvio que parezca (a mí no se me había ocurrido), cambien el background a un color que contraste mucho.

1:08 Modificando Estilos. Experimentando.

4:14 Usando las flechas Up y Down para modificar valores de las propiedades.

5:44 Sección :hov nos permite acceder a los estados de las pseudo clases.

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

Si usas Sass, Less, Stylus o cualquier otro preprocesador de CSS, editar los archivos de salida de CSS generados en el editor Styles no te servirá ya que no se asignan a tu fuente original.

Una lista de cosas geniales que puedes hacer con las DevTools de Chrome:

Aqui hay una lista de cosas que puedes hacer con las herramientas que Google Chrome provee:

• Arrastrar elementos de HTML en el panel de elementos
  Se puede arrastrar cualquier elemento y cambiar su posición actual desde el panel de elementos
  

  

• Puedes seleccionar un nodo en el panel de elementos y escribir $0 en la consola para hacer referencia a él
  

  

• Usar el valor de la última operación en la consola
  Puedes usar $_ para referenciar el valor retornado de la operación anterior ejecutado en la consola
  

  

• Encontrar donde está definida una propiedad en CSS
  Si presionamos ctrl + click a una propiedad CSS en el panel de elementos, las DevTools nos llevaran al lugar donde están definidas en el código fuente
  

  

• Hacer screenshot a un elemento
  Seleccionar un elemento y presionar ctrl + shift + p para abrir el menú de comandos y seleccionar Capture node screenshot
  

  

• Encontrar elementos usando selectores de CSS
  Si presionamos ctrl + F en el panel de elementos, se abre la barra de búsqueda.
  Podemos buscar elementos por cadenas de texto y también podemos buscar elementos usando selectores CSS
  

  
  Estas son algunas de las geniales funcionalidades de las DevTools, comparto un link donde podemos ver una lista más extensa y detallada de ello: Lista de cosas que puedes hacer desde tus DevTools y que tal vez no sabías

Ayuda mucho más a jugar con el CSS antes de escribir o hacer un cambio ya en el código

Pobre Firefox me lo estan dejando de lado hahaha

Es increible la forma en que se utilizan los estilos y como nos pueden ayudar a mejorar nuestras paginas web en el devtools. Ya sabia algo de CSS, pero al usar las casillas de estado, esas las desconocia por completo. Esta clase me enseño la forma de como podemos usarlas y modificarlas hasta que su estado sea perfecta. Increible, saludos.

Consejos para editar CSS en Dev Tools

• Para editar el CSS es necesario seleccionar el elemento HTML para que la configuración en CSS funcione.
• Se puede dar doble click sobre un elemento numérico y con las flechas subir y bajar el numero.
• Se pueden seleccionar los element state al dar click en “:hov” del elemento HTML en el que estas posicionado.

jajajaja no puedo subir la imagen, pero edité los estilos de platzi, genial!!! Muy buena clase.

Interesante el filtro :hov, antes lo hacia de manera manual

A seguir aprendiendo CSS

deberían agregar una descripción de los otros componentes que podemos ver en esa pestaña, como por ejemplo el diagrama de caja que nos muestra los tamaños de elemento html que estamos inspeccionando.

A seguir.

Tambien me tope con esta herramientas mientras aprendia HTLM Y CSS, ahora usarlas con conceptos claros y precisos sera mucho mas util…

gracias por aclarar una duda que tenía desde hace tiempo pero que tampoco había investigado y s como encontrar los estilos de hover.

![](

Interesante tema permite hacer pequeñas modificaciones en el diseño, sin cambiar el código HTML. Esto es más complejo y requeriría trabajar con un diseñador web y abrir el FTP de tu diseño para modificarlo.

Cuando modificas elementos CSS como mencionó Diego, inmediatamente se visualizan en el proyecto, cuando quieras hacer lo mismo con JavaScript debes presionar: Command+S (Mac) o Ctrl+S (Windows, Linux).

estimado profesor , podria xcompartir el proyecto ?

Hola, cuando trabajo un menú desplegable al quitar el puntero sobre el se esconde nuevamente, se puede trabajar con el inspector de elementos que quede visible el menú y pueda ajustar los estilos? He intentado pero siempre regresa a su estado inicial me ha pasado con menús en Boostrap.

Como dice el profe con las teclas puedes subir el tamaño de algún elemento arriba y abajo, pero si presionas SHIFT + tecla direccional te sube de a 10px por cada presión