Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Trabajando con las variables CSS

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Aplicando las variables CSS y actividad Trabajando con las variables CSS

por Estudiante
| 40.8k xp | 774 posts

Trabajar con variables CSS es como construir una base sólida para tu proyecto: si lo haces bien desde el principio, todo lo demás se vuelve más fácil. En este caso, el error no está en el valor ni en el lugar donde se declara la variable, sino en la sintaxis. Para que el navegador reconozca una variable CSS, debe comenzar con dos guiones (--). Además, no basta con declararla, ¡hay que aplicarla! Usar var(--nombre-variable) es lo que realmente conecta la declaración con el estilo visual. Este tipo de detalle puede parecer pequeño, pero marca una gran diferencia en la eficiencia del código.

1 respuesta
por Brenda Souza
| 6077.4k xp | 22224 posts
Instructor

¡Hola Estudiante, espero que estés bien!

Entiendo que estás trabajando con variables CSS y te encuentras con un problema relacionado con su declaración y aplicación. Vamos a desglosar lo que está sucediendo.

En el código que compartiste, veo que hay un par de detalles a corregir para que la variable funcione correctamente:

  1. Declaración de la Variable: Las variables CSS deben comenzar con dos guiones. En tu caso, deberías declarar la variable como --color-actualizada-del-proyecto en lugar de color-actualizada-del-proyecto.

  2. Aplicación de la Variable: Después de declarar la variable correctamente, necesitas aplicarla en el estilo del encabezado. Para cambiar el color de fondo del .header, debes usar la función var() para aplicar la variable. Así que el código debería verse algo así:

:root {
    --color-actualizada-del-proyecto: #eb94bd;
}

.header {
    background-color: var(--color-actualizada-del-proyecto);
}

Siguiendo estos pasos, tu encabezado debería reflejar el color definido en la variable. Espero que esto te ayude a resolver el problema y a seguir avanzando en tu proyecto. ¡Espero haber ayudado y buenos estudios!