Teoría
Teoría

Valores compartidos en :root

Algunos valores se usan tanto en la tarjeta como en otras partes de la página. Conviene declararlos en la regla :root.

La pseudoclase :root selecciona el elemento raíz del documento. En HTML es <html>. Sus elementos descendientes heredan las propiedades personalizadas que declaramos en él, por lo que resulta útil para definir valores compartidos por toda la página.

Al principio de los estilos ya agregamos las reglas vacías :root y body. Declaremos un color para la página y usémoslo como fondo de body.

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 { } body { } .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 --page-color con el valor #203044.
En la regla body, establece background-color: var(--page-color).