Variabel Lokal

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 4 dari 35.

Kamu mungkin sudah menyadari bahwa kita sering menggunakan :root untuk mendeklarasikan variabel. Ini karena :root bersifat global: variabel yang didefinisikan di sini berlaku untuk seluruh halaman HTML (seperti yang telah kita sebutkan sebelumnya).

Namun, terkadang kamu ingin variabel yang hanya memengaruhi bagian tertentu pada halaman. Misalnya, bayangkan kamu sedang membuat toko online dengan banyak kartu produk. Kamu bisa membuat variabel di dalam class .card untuk menata hanya kartu-kartu tersebut tanpa memengaruhi elemen lain.

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

Dengan cara ini, variabel hanya berfungsi di dalam elemen .card, sehingga kamu memiliki kendali lebih besar atas area tertentu.

Tantangan

Mudah

Kamu diberi halaman toko online dengan beberapa kartu produk. Tugasmu:

Di dalam class .card, buat variabel CSS lokal bernama --card-accent dan tetapkan nilainya menjadi coral.
Gunakan variabel ini untuk mengatur warna teks heading <h3> di dalam kartu.
Gunakan variabel yang sama sebagai warna latar belakang untuk <button> kartu.

Coba sendiri

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