3 herramientas para trabajar con CSS

Autor: | Última modificación: 31 de mayo de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: , ,

El día a día en CSS requiere que sepamos de múltiples etiquetas, navegadores y recursos para estilizar nuestras página web. En este post, te recomendamos 3 herramientas para trabajar con CSS y hacer tus procesos más sencillos.

Herramientas para trabajar con CSS

MDN

La primera de las herramientas para trabajar con CSS es Mozilla Developper Network, la página que todo desarrollador web debe conocer. Aunque la usamos mucho para HTML, la MDN es una página oficial que documenta los estándares web, incluyendo CSS. Es indispensable para los diseñadores web, ya que tiene una lista enorme de todas las propiedades que tiene CSS con explicaciones detalladas y ejercicios. Puedes consultar la MDN cada vez que te encuentres con una nueva propiedad.En la mayoría de los casos, puedes acceder a este recurso directamente desde tu software de programación al escribir una etiqueta o propiedad y darle clic en su definición.

CanIUse

La segunda de las herramientas para trabajar con CSS que te recomendamos es el sitio web CanIUse, que no es útil solo para CSS, sino para todo tipo de software de desarrollo web. CanIUse nos da información actualizada sobre cómo los navegadores soportan cada propiedad que queramos implementar. Al buscar una propiedad, CanIUse nos da una tabla con los navegadores más importantes de ordenador y móvil. Su información es de uso público y la revisa una suite de prueba personalizada que puedes encontrar en su página web.

Además, puedes buscar cuánto se usa esa propiedad en cada navegador según tu región objetivo. Esto te permite definir en qué navegador enfocarte para el diseño de tu página web teniendo en cuenta cómo tus usuarios se comportan. También te ayuda a definir cuánto valor tiene una propiedad dependiendo cuánto la usarán tus usuarios.

Navegador – Inspector

La última de las herramientas para trabajar con CSS de la que te vamos a hablar es el panel «herramientas de desarrollador» de tu navegador. En este panel podrás inspeccionar y editar el HTML y CSS de cualquier página web. Esta útil herramienta te permitirá editar en vivo el CSS e intentar diferentes diseños antes de comprometerte a implementarlos en las hojas de estilo de tu sitio web. Al entender la jerarquía y el orden CSS de una página ya creada, podrás ahorrar tiempo en el diseño de tu propio sitio web. Para entender esto de verdad, te recomendamos jugar con los elementos de la página web.

A continuación, te enseñaremos dos maneras para crear y editar estilos desde la sección de estilo en el panel de elementos.

Añade una regla

Puedes usar el botón + en la parte superior derecha de la sección estilo para crear una nueva regla. Esto te ayudará a encontrar los estilos del elemento que has seleccionado previamente y editarlos. Las reglas no se quedan guardadas en ninguna hoja de estilo existente, sino que se guardan en la hoja de estilo del inspector. Podrás encontrar y editar esta hoja de estilo en el panel de fuentes, a la derecha de elementos.

Edita una propiedad

En el panel de estilos puedes editar el nombre o el valor de una propiedad existente en la página web. Para esto, solo tienes que hacer clic en el elemento del sitio web que quieras editar. El código CSS aparecerá en el inspector y podrás ver sus propiedades. Para editar el valor de la propiedad, haz clic sobre este y redacta el nuevo valor. Si estás editando el nombre de la propiedad, basta con pulsar enter o tab para editar su valor.

Ten en cuenta que estos cambios no serán permanentes y que se eliminarán una vez recargues la página web. Por esto, te recomendamos copiar los cambios que te gusten en tu propia hoja de estilo.

¿Cómo continuar aprendiendo?

Ahora que conoces este conjunto de herramientas para trabajar con CSS, ha llegado el momento de ponerlas en práctica y, así, afianzar tus conocimientos. Para avanzar con tu formación y aprender más sobre los procesos de desarrollo y diseño de páginas web, te recomendamos nuestro bootcamp intensivo: Desarrollo Web Full Stack Bootcamp. ¡Inscríbete ahora y conviértete en un profesional en pocos meses!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!