Variáveis Locais

Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 4 de 35.

Você talvez tenha percebido que costumamos usar :root para declarar variáveis. Isso acontece porque :root é global: as variáveis definidas aqui se aplicam à página HTML inteira (como mencionamos antes).

Mas, às vezes, você quer variáveis que afetem apenas determinadas partes da página. Por exemplo, imagine criar uma loja online com muitos cartões de produto. Você pode criar variáveis dentro de uma classe .card para estilizar apenas esses cartões, sem afetar outros elementos.

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

Assim, a variável funciona apenas dentro dos elementos .card, dando a você mais controle sobre áreas específicas.

Desafio

Fácil

Você recebeu uma página de loja online com vários cartões de produtos. Sua tarefa:

Dentro da classe .card, crie uma variável CSS local chamada --card-accent e defina seu valor como coral.
Use essa variável para definir a cor do texto do título <h3> dentro do cartão.
Use a mesma variável como cor de fundo do <button> do cartão.

Experimente você mesmo

<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>