Variables locales

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 4 sur 35.

Tu as peut-être remarqué que nous utilisons souvent :root pour déclarer des variables. C’est parce que :root est global : les variables définies ici s’appliquent à toute la page HTML (comme nous l’avons mentionné précédemment).

Mais parfois, tu veux des variables qui n’affectent que certaines parties de la page. Par exemple, imagine que tu crées une boutique en ligne avec de nombreuses cartes de produits. Tu peux créer des variables dans une classe .card pour styliser uniquement ces cartes sans affecter les autres éléments.

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

De cette façon, la variable ne fonctionne qu’à l’intérieur des éléments .card, ce qui vous donne davantage de contrôle sur des zones précises.

Défi

Facile

Une page de boutique en ligne contenant plusieurs fiches de produits vous est fournie. Votre tâche :

Dans la classe .card, créez une variable CSS locale nommée --card-accent et définissez sa valeur sur coral.
Utilisez cette variable pour définir la couleur du texte du titre <h3> dans la fiche.
Utilisez la même variable comme couleur d’arrière-plan du <button> de la fiche.

Essayez vous-même

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