Teoría
Teoría

Referencias a otras propiedades personalizadas

También podemos usar var() en el valor de una propiedad personalizada. Así vinculamos una configuración con otra.

Agreguemos a :root el color principal de la paleta: --color-primary. La propiedad local de la tarjeta --card-color tomará su valor de ahí:

.card {
  --card-color: var(--color-primary);
}

Formaremos una cadena: color compartido de la paleta → configuración de la tarjeta → color del título y del botón. Por ahora mantendremos el verde para comprobar que las referencias funcionan.

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; } body { background-color: var(--page-color); } .card { --card-color: #14a76c; --card-radius: 12px; border-radius: var(--card-radius); --card-spacing: 20px; padding: var(--card-spacing); } .card__title { color: var(--card-color); } .card__button { background-color: var(--card-color); } .card__image { border-radius: var(--card-radius); margin-bottom: var(--card-spacing); } .card__description { margin-bottom: var(--card-spacing); }

ObjetivosRealizado

En la regla :root, declara --color-primary con el valor #14a76c.
En la regla .card, cambia el valor de --card-color a var(--color-primary).