Aplicando las variables CSS

¡Hola Estudiante, espero que estés bien!

Entiendo que estás aprendiendo a usar variables CSS para optimizar tu código y hacer cambios de diseño de manera más eficiente. Las variables CSS son una herramienta poderosa porque te permiten definir un valor una vez y reutilizarlo en múltiples lugares, lo que facilita la actualización y el mantenimiento del código.

Para aplicar las variables CSS, sigue estos pasos:

1. Declaración de las variables: Debes declarar tus variables dentro del selector :root, que es un pseudo-clase que representa el elemento raíz del documento. Por ejemplo:

   :root {
       --color-primario: #5f5b9c;
       --color-secundario: #6196a6;
       --color-terciario: #a4ce95;
       --fuente-mozzarella: 'Mozzarella', sans-serif;
       --fuente-chrono: 'Chrono One', sans-serif;
   }
   

2. Uso de las variables: Una vez declaradas, puedes usar estas variables en tu CSS utilizando la función var(). Por ejemplo:

   body {
       background-color: var(--color-primario);
       color: var(--color-secundario);
   }
   
   header {
       font-family: var(--fuente-mozzarella);
   }
   
   .titulo-destaque {
       color: var(--color-terciario);
   }
   

3. Ventajas: La ventaja de usar variables es que si decides cambiar un color o una fuente, solo necesitas actualizar la variable en un solo lugar, y todos los elementos que la utilizan se actualizarán automáticamente.

Espero que estos ejemplos te ayuden a entender cómo aplicar las variables CSS en tus proyectos y a ver lo beneficioso que puede ser para mantener tu código limpio y fácil de modificar. ¡Espero haber ayudado y buenos estudios!