Variables locales

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 4 de 35.

Es posible que hayas notado que a menudo usamos :root para declarar variables. Esto se debe a que :root es global — las variables definidas aquí se aplican a toda la página HTML (como mencionamos anteriormente).

Pero a veces, quieres variables que solo afecten a ciertas partes de la página. Por ejemplo, imagina que estás construyendo una tienda en línea con muchas tarjetas de productos. Puedes crear variables dentro de una clase .card para dar estilo solo a esas tarjetas sin afectar a otros elementos.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

De esta manera, la variable solo funciona dentro de los elementos .card, lo que te brinda más control sobre áreas específicas.

Desafío

Fácil

Se te proporciona una página de tienda en línea con varias tarjetas de productos. Tu tarea:

Dentro de la clase .card, crea una variable CSS local llamada --card-accent y establece su valor en coral.
Usa esta variable para establecer el color de texto del encabezado <h3> dentro de la tarjeta.
Usa la misma variable como el color de fondo para el <button> de la tarjeta.

Hoja de referencia

Las variables CSS pueden definirse localmente dentro de selectores específicos, no solo de forma global en :root. Las variables locales solo se aplican a los elementos dentro del alcance de ese selector.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

Esto crea una variable --card-color que solo funciona dentro de los elementos .card, proporcionando un control más específico sobre el estilo de componentes particulares.

Pruébalo tú mismo

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>