Teoría
Teoría

Mayúsculas y minúsculas en los nombres

Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas. Por ejemplo, --color y --Color son dos propiedades diferentes. El nombre que usamos en var() debe coincidir exactamente con el de la declaración.

En el código inicial de este ejercicio cambiamos una letra a propósito en la referencia del botón: aparece var(--Color), pero en la tarjeta está declarada la propiedad --color. Por eso el botón perdió el fondo verde. Corrijamos el nombre de la referencia.

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

.card { --color: #14a76c; } .card__title { color: var(--color); } .card__button { background-color: var(--Color); }

ObjetivosRealizado

En la regla .card__button, corrige el valor de background-color para que sea var(--color) y use la propiedad ya declarada.