Variabili locali

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 4 di 35.

Potresti aver notato che spesso usiamo :root per dichiarare variabili. Questo perché :root è globale: le variabili definite qui si applicano all'intera pagina HTML (come abbiamo detto prima).

Ma a volte vuoi variabili che influiscano solo su determinate parti della pagina. Per esempio, immagina di creare un negozio online con molte schede prodotto. Puoi creare variabili all'interno di una classe .card per applicare lo stile solo a quelle schede, senza influire sugli altri elementi.

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

In questo modo, la variabile funziona solo all'interno degli elementi .card, offrendoti un maggiore controllo su aree specifiche.

Sfida

Facile

Ti viene fornita la pagina di un negozio online con diverse schede prodotto. Il tuo compito:

All’interno della classe .card, crea una variabile CSS locale chiamata --card-accent e impostane il valore su coral.
Usa questa variabile per impostare il colore del testo dell’intestazione <h3> all’interno della scheda.
Usa la stessa variabile come colore di sfondo del <button> della scheda.

Provalo tu

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