Teoría
Teoría

Propiedades personalizadas de un componente

El título y el botón usan la misma propiedad de configuración: --card-color. Demos a cada parte de la tarjeta su propia propiedad: --card-title-color y --card-button-color.

Por ahora ambas harán referencia al color principal de la paleta. Más adelante podremos cambiar solo el color del botón y mantener el título vinculado a la paleta compartida.

Al sustituir las declaraciones, también hay que actualizar las referencias. Hasta que las actualicemos, el título y el texto del botón pueden quedar casi invisibles en la tarjeta. Completemos los tres pasos para que ambos elementos recuperen su color.

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-color: var(--color-primary); --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 .card, sustituye la declaración de --card-color por estas dos declaraciones: --card-title-color: var(--color-primary) y --card-button-color: var(--color-primary).
En la regla .card__title, establece color: var(--card-title-color).
En la regla .card__button, establece background-color: var(--card-button-color).