Teoría
Teoría

Declarar propiedades personalizadas

En la página hay una tarjeta sobre el paseo junto al río Karpovka. El HTML y los estilos principales ya están listos. En este capítulo vamos a personalizar la tarjeta con propiedades personalizadas, también conocidas como variables CSS.

Una propiedad personalizada guarda un valor con el nombre que elijamos. El nombre comienza con dos guiones --. Se declara dentro de las llaves de una regla CSS, igual que cualquier otra declaración:

.banner {
  --text-color: #663399;
}

Declararla no cambia los estilos por sí solo. Para usar el valor guardado, escribimos var() con el nombre completo de la propiedad, incluidos los dos guiones:

.banner {
  --text-color: #663399;
  color: var(--text-color);
}

El título está dentro de la tarjeta. Los elementos descendientes heredan las propiedades personalizadas, así que el título puede usar el valor declarado en .card.

Empecemos por el color del título. Al sustituir el valor por var(), el título conservará 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

.card { } .card__title { color: #3370ce; } .card__button { background-color: #3370ce; }

ObjetivosRealizado

En la regla .card, declara la propiedad personalizada --color con el valor #3370ce.
En la regla .card__title, cambia el valor de color a var(--color).