Declarar la variable:
CSS
:root {
--color-principal: #3498db; /* El doble guion '--' es lo que la identifica como variable */
--color-secundario: #2c3e50;
--fuente-base: 16px;
}
Usar la variable:
Para usar la variable en tu código, emplear la función var():
CSS
h1 {
color: var(--color-principal);
}
body {
background-color: var(--color-secundario);
font-size: var(--fuente-base);
}
Hola Ernesto, espero que estés bien
¡Espero que estés bien! Veo que estás trabajando con variables CSS, lo cual es una excelente manera de mantener tu código limpio y fácil de mantener. Ya has declarado tus variables y las estás utilizando correctamente en tu CSS.
La actividad que estás realizando parece invitarte a experimentar con diferentes paletas de colores. Aquí tienes algunos pasos que podrías seguir para completar la tarea:
Explora Paletas de Colores: Puedes visitar sitios como Color Hunt o la Rueda de Colores de Adobe para encontrar nuevas combinaciones de colores que te gusten.
Actualiza tus Variables: Una vez que encuentres una paleta que te guste, simplemente actualiza los valores de tus variables en el bloque :root. Por ejemplo:
:root {
--color-principal: #nuevoColor1;
--color-secundario: #nuevoColor2;
--fuente-base: 16px; /* Puedes cambiar esto también si lo deseas */
}
Utiliza el Atajo Ctrl + D: Si necesitas cambiar múltiples instancias de un color en tu código, selecciona el color con el mouse y usa el atajo ctrl + D para seleccionar todas las instancias y cambiarlas simultáneamente.
Experimenta con Otros Elementos: Además de los colores, intenta crear variables para otros elementos como tamaños de fuente, márgenes, etc., para ver cómo afectan el diseño de tu proyecto.
Espero que estas sugerencias te ayuden a completar tu tarea y a explorar aún más el potencial de las variables CSS. ¡Diviértete experimentando con los colores y personalizando tu proyecto!
Espero haber ayudado y buenos estudios!