Lokale Variablen

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 4 von 35.

Vielleicht ist dir aufgefallen, dass wir häufig :root verwenden, um Variablen zu deklarieren. Das liegt daran, dass :root global ist: Hier definierte Variablen gelten für die gesamte HTML-Seite (wie bereits erwähnt).

Aber manchmal möchtest du Variablen, die sich nur auf bestimmte Teile der Seite auswirken. Stell dir zum Beispiel vor, du baust einen Onlineshop mit vielen Produktkarten. Du kannst Variablen innerhalb einer .card-Klasse erstellen, um nur diese Karten zu gestalten, ohne andere Elemente zu beeinflussen.

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

Auf diese Weise funktioniert die Variable nur innerhalb von .card-Elementen, wodurch du mehr Kontrolle über bestimmte Bereiche erhältst.

Aufgabe

Einfach

Dir wird eine Online-Shop-Seite mit mehreren Produktkarten gegeben. Deine Aufgabe:

Erstelle innerhalb der Klasse .card eine lokale CSS-Variable namens --card-accent und setze ihren Wert auf coral.
Verwende diese Variable, um die Textfarbe der Überschrift <h3> innerhalb der Karte festzulegen.
Verwende dieselbe Variable als Hintergrundfarbe für den <button> der Karte.

REQUIRED OUTPUT FORMAT: [Your translated content here]

Probier es selbst

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