Teoría
Teoría

Valores compartidos y locales

Una propiedad de configuración del componente puede guardar una referencia a la paleta compartida o un color concreto. La elección depende del diseño que busquemos.

Hagamos que el botón sea rosa escribiendo el color directamente en --card-button-color. Mantendremos la propiedad del título vinculada a --color-primary.

Después cambiaremos el color principal de la paleta. El título tomará el nuevo color y el botón conservará su valor local.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Introducción a las propiedades personalizadas</title> <link rel="stylesheet" href="card.css"> <link rel="stylesheet" href="style.css"> </head> <body> <article class="card"> <img class="card__image" src="karpovka-400.jpg" width="200" height="100" alt="Paseo junto al río Karpovka"> <div class="card__content"> <h2 class="card__title">Paseo junto al río Karpovka</h2> <p class="card__description"> Un pintoresco rincón de San Petersburgo, ideal para salir a caminar. </p> <a class="card__button" href="#">Más información</a> </div> </article> </body> </html>

CSS

:root { --page-color: #203044; --color-primary: #14a76c; } body { background-color: var(--page-color); } .card { --card-radius: 12px; border-radius: var(--card-radius); --card-spacing: 20px; padding: var(--card-spacing); --card-title-color: var(--color-primary); --card-button-color: var(--color-primary); } .card__title { color: var(--card-title-color); } .card__button { background-color: var(--card-button-color); } .card__image { border-radius: var(--card-radius); margin-bottom: var(--card-spacing); } .card__description { margin-bottom: var(--card-spacing); }

ObjetivosRealizado

En la regla .card, cambia el valor de --card-button-color a #f64c72.
En la regla :root, cambia el valor de --color-primary a #3370ce. El título debe quedar azul y el botón debe seguir rosa.