Teoría
Teoría

Cadenas de propiedades personalizadas

Solo falta ajustar el fondo de la tarjeta. Construyamos la cadena que ya conocemos: valor compartido de la paleta → configuración de la tarjeta → propiedad CSS del fondo.

Llamaremos --color-surface al color claro compartido y --card-background a la propiedad de configuración del fondo de la tarjeta. Para aplicar el fondo, usaremos background-color.

Agregaremos las declaraciones a las reglas :root y .card que ya existen. No hace falta cambiar el resto de la configuración de la tarjeta.

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: #3370ce; } 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: #f64c72; } .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 :root, declara --color-surface con el valor #f4f7fc.
En la regla .card, declara --card-background con el valor var(--color-surface).
En la regla .card, establece background-color: var(--card-background).