Haga lo que hicimos en el aula

Aquí tienes el mensaje actualizado, incluyendo cómo :root facilitó el cambio rápido de colores y fuentes con atajos de teclado:

Desarrollo del desafío - Uso de variables CSS para la personalización del proyecto

En este desafío, exploré el uso de variables CSS para optimizar la personalización del diseño del sitio web. Para ello, seguí los siguientes pasos:

1. Selección de una nueva paleta de colores con Adobe ColorUtilicé la herramienta Adobe Color para generar una paleta de colores complementarios que armonizara con el diseño del sitio. Esta elección permitió mejorar la estética del proyecto y darle un aspecto más equilibrado y atractivo.

2. Implementación de variables CSS en :rootPara facilitar la gestión de colores y fuentes en el código, declaré variables CSS dentro del selector :root. Esto permitió modificar rápidamente el estilo de la página con solo cambiar los valores en un único lugar.

3. Cambio rápido de estilos con atajos de tecladoGracias al uso de :root, pude modificar los colores y fuentes de manera ágil utilizando atajos como Ctrl + D para seleccionar y editar varias ocurrencias simultáneamente, lo que hizo más eficiente la personalización del código.

4. Sustitución de valores en los estilos CSSReemplacé los valores de color y fuentes estáticos por variables dentro de los selectores de los elementos, asegurando una mayor flexibilidad y mantenimiento del código.

A continuación, comparto el código CSS con las variables implementadas en :root:

/* Estilos generales */
* {
    padding: 0;
    margin: 0;
}

:root {
    --color-primario: #1E1E2E; /* Fondo principal */
    --color-secundario: #89B4FA; /* Texto destacado */
    --color-terciario: #A6ADC8; /* Color complementario */
    --color-hover: #F38BA8; /* Efecto hover */

    --fuente-montserrat: "Montserrat", sans-serif;
    --fuente-krona: "Krona One", sans-serif;
}

body {
    background-color: var(--color-primario);
    color: var(--color-secundario);
    font-family: var(--fuente-montserrat);
    box-sizing: border-box;
    text-align: center;
}

.header_menu_link {
    font-family: var(--fuente-montserrat);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-terciario);
    text-decoration: none;
}

/* Estilos para el contenido principal */
.titulo-destaque {
    color: var(--color-terciario);
}

.presentacion_contenido_titulo {
    font-size: 36px;
    font-family: var(--fuente-krona);
}

.presentacion_contenido_texto {
    font-size: 24px;
    font-family: var(--fuente-montserrat);
}

.presentacion_enlaces_subtitulo {
    font-family: var(--fuente-krona);
    font-size: 24px;
    font-weight: 400;
}

.presentacion_enlaces_link {
    color: var(--color-secundario);
    border: 2px solid var(--color-terciario);
}

.presentacion_enlaces_link:hover {
    background: linear-gradient(90deg, var(--color-hover), var(--color-secundario));
    box-shadow: 0 0 15px rgba(243, 139, 168, 0.7);
    border: 2px solid var(--color-hover);
}

.titulo-blog {
    color: var(--color-secundario);
}

a:hover {
    color: var(--color-hover);
}

/* Estilos para el pie de página */
footer {
    background-color: var(--color-terciario);
    color: var(--color-primario);
    font-family: var(--fuente-montserrat);
}

Este enfoque hizo que la personalización del sitio fuera más eficiente y flexible.

Gracias a esta implementación, ahora es más fácil modificar los colores y fuentes del sitio web con solo cambiar los valores de las variables en :root. Esta práctica no solo mejora la organización del código, sino que también permite mantener un diseño coherente y fácil de actualizar con atajos de teclado.

Atentamente,

Laura Isabella Moreno Herrera