Esta guía está destinada a enseñarte cómo solucionar errores en tu código CSS. Si no estás seguro de si tu error está en tu HTML, te recomiendo leer: ¿Qué es depurar y cómo dominarlo?.
CSS es una tecnología muy complicada de depurar, probablemente entre las más difíciles; me llevó años dominarla. No digo esto para asustarte, pero necesitas tomarlo en serio; mi objetivo es darte una guía concisa y herramientas para convertirte rápidamente en bueno en ello.
Tu editor de código tiene resaltado de sintaxis que te ayudará a reconocer errores de sintaxis como falta de punto y coma, llaves, etc. La herramienta de desarrollador: Tiene dos secciones que necesitas aprender y usar bastante bien:
elements
Muestra el tag HTML en tu sitio web y los selectores que tiene. Puedes mirar los atributos de clase o ID en cada tag.
Styles
dentro de la pestaña elements
Si haces clic en uno de los tags, la pestaña "styles
" mostrará qué estilos se están aplicando a ella.
Estos son algunos de los errores más difíciles de depurar:
¿Recuerdas alguna vez en tu historia de desarrollador cuando intentaste aplicar un estilo a un elemento, pero no pasaba nada? No importa lo que hicieras, el elemento seguía igual.
Esto puede suceder por varias razones:
Abre la herramienta de desarrollador elements
Haz clic en el tag HTML que quieres inspeccionar.
Mira la pestaña style
, que muestra los estilos aplicados al elemento.
Comprueba si tu selector y reglas están en la lista de estilos aplicados al tag.
Si tu selector aparece, has aplicado con éxito los estilos, pero otros estilos pueden entrar en conflicto.
🔥 Debemos recordar que muchos estilos se aplican simultáneamente a los elementos; el navegador combina todas las reglas heredadas de todos los selectores que has creado.
Usa la pestaña elemento de las herramientas de desarrollador y busca el tag que quieres revisar. Haz clic en el tag y revisa los estilos que se le están aplicando.
Si no ves tu estilo CSS, es probablemente por un error de ortografía o una lógica de selector defectuosa. Aquí hay un ejemplo en la imagen de abajo:
Nota: La clase
blue
se escribió mal conbluee
, por lo que los estilos no se aplicaron.
Cuando uses la pestaña elements de las herramientas de desarrollador, haz clic en cualquier elemento y la pestaña styles mostrará todos los estilos que se están aplicando.
Si un estilo se ve anulado por otro, ambos se mostrarán, pero uno estará tachado con una línea.
Nota: En la imagen de arriba, la regla CSS color se anula dos veces.
CSS tiene algunos temas difíciles de entender que te pueden seguir durante años y crear muchos errores, así que ten cuidado y tómate el tiempo para entenderlos bien.
No uses la propiedad position para diseños, usa display: flex;
en su lugar.
Yo uso la regla de posición para cosas pequeñas como adjuntar una burbuja de notificación a un icono, aquí hay un video de 5 minutos sobre cómo funcionan el absoluto vs relativo.
La herramienta más poderosa para construir diseños es el flexbox. Aquí hay un video de 5 minutos sobre cómo funciona.
Tómate un tiempo para dominar los selectores CSS básicos y avanzados; aquí hay algunos recursos: