Sampai tahap ini kartu tampil sebagai daftar teks polos dengan gaya bawaan browser. Bagian ini menatanya dengan satu file styles/style.css yang berada di folder proyek, sejajar dengan folder assets dan tests. Stylesheet yang sama kita tuliskan tuntas sekali jadi, termasuk aturan untuk tombol filter yang baru terpakai pada Bagian 4. Materi dasarnya berasal dari section HTML dan CSS; di sini kita menyatukannya untuk kasus nyata.

Prinsip Penataan Katalog #

Stylesheet proyek berpegang pada lima prinsip berikut:

  • Palet cokelat-krem yang didefinisikan sekali sebagai custom properties, yaitu variabel CSS.
  • Setiap produk tampil sebagai kartu putih bersudut bulat dengan lebar tetap 230px.
  • Deretan kartu tersusun oleh flexbox: ul.katalog memakai display: flex dengan flex-wrap, sehingga kartu sejajar dan pindah baris sendiri saat ruangnya habis.
  • Gambar dibatasi max-width: 100% supaya tidak meluber dari kartunya.
  • Aturan tombol filter dengan aria-pressed disiapkan untuk Bagian 4.

Custom properties didefinisikan pada pemilih :root, lalu dipakai ulang melalui fungsi var(). Bila palet ingin diganti, kita cukup mengubah nilai di satu tempat.

Isi Stylesheet Proyek #

Berikut isi utuh styles/style.css:

css styles/style.css 
/* Stylesheet proyek Katalog Produk - ditulis pada Bagian 3, dipakai Bagian 3 dan 4 */
:root {
  --warna-utama: #6f4e37;
  --warna-utama-tua: #53392a;
  --warna-teks: #1f2937;
  --warna-latar: #f4efe7;
  --warna-putih: #ffffff;
  --warna-garis: #e3d9cb;
  --jarak: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--warna-teks);
  background-color: var(--warna-latar);
}

header {
  background-color: var(--warna-utama);
  color: var(--warna-putih);
  padding: var(--jarak);
}

header h1 {
  margin: 0;
}

header p {
  margin: 4px 0 0;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--jarak);
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--jarak);
}

.filter button {
  padding: 8px 18px;
  border: 1px solid var(--warna-utama);
  border-radius: 999px;
  font-size: 1rem;
  background-color: var(--warna-putih);
  color: var(--warna-utama);
  cursor: pointer;
}

.filter button[aria-pressed="true"] {
  background-color: var(--warna-utama);
  color: var(--warna-putih);
}

.katalog {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jarak);
  margin: 0 0 var(--jarak);
  padding: 0;
  list-style: none;
}

.kartu {
  width: 230px;
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border: 1px solid var(--warna-garis);
  border-radius: 8px;
}

.kartu img {
  display: block;
  margin: 0 auto var(--jarak);
  max-width: 100%;
  height: auto;
}

.kartu h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--warna-utama-tua);
}

.kartu p {
  margin: 0 0 var(--jarak);
  font-size: 0.95rem;
}

.kartu dl {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  font-size: 0.9rem;
}

.kartu dt {
  color: #6b7280;
}

.kartu dd {
  margin: 0;
  font-weight: bold;
}

.kartu[hidden] {
  display: none;
}

footer {
  background-color: var(--warna-utama);
  color: var(--warna-putih);
}

footer p {
  margin: 0;
  padding: var(--jarak);
  text-align: center;
}

Mari kita bedah aturan-aturan pentingnya:

  1. Blok :root: tujuh custom properties — enam warna palet beserta --jarak 16px — yang dipakai ulang oleh seluruh aturan lain melalui var().
  2. Aturan universal * dengan box-sizing: border-box: padding dan border dihitung di dalam lebar elemen, sehingga kartu tidak meluber saat diberi jarak.
  3. Aturan header, main, dan footer: kepala halaman berlatar cokelat utama, container 960px di tengah layar, dan penutup yang serupa kepala.
  4. Aturan .filter: deretan tombol sejajar dengan gap 8px; pemilih [aria-pressed="true"] memberi latar cokelat pada tombol yang sedang aktif.
  5. Aturan .katalog dan .kartu: flexbox membuat kartu sejajar dan pindah baris otomatis; list-style: none menghilangkan penanda bulat bawaan ul karena kartu sudah menandai dirinya sendiri.
  6. Aturan .kartu img dan .kartu dl: gambar terpusat dengan max-width: 100%, sedangkan dt dan dd disusun sejajar agar baris berat dan harganya ringkas.
  7. Aturan .kartu[hidden]: menjamin kartu benar-benar disembunyikan saat atribut hidden aktif pada Bagian 4, sebab aturan penulis dapat menimpa gaya bawaan [hidden] dari browser.

Menghubungkan Stylesheet ke Halaman #

File katalog-styling.html pada folder bagian ini adalah katalog-lengkap.html ditambah satu baris link di dalam head:

html Cuplikan katalog-styling.html 
  <link rel="stylesheet" href="../styles/style.css">

Jalur ../styles/style.css dibaca relatif terhadap lokasi file HTML: keluar satu folder dari part-3-styling-dasar, lalu masuk ke folder styles. Pohon folder pada overview proyek menjaga jalur ini tetap benar.

Output yang Dihasilkan:

text 
Tampilan halaman berubah total:
  - Kepala dan penutup halaman berlatar cokelat dengan teks putih
  - Empat produk tampil sebagai kartu putih sejajar di atas latar krem
  - Penanda bulat daftar kini hilang; kartu menjadi penandanya
  - Nama produk berwarna cokelat tua

Pemeriksaan Hasil Tahap Ini #

  1. Pastikan styles/style.css berada di folder proyek, lalu buka katalog-styling.html di browser.
  2. Perkecil lebar jendela dan amati: kartu pindah baris satu per satu tanpa saling menumpuk.
  3. Buka tests/cek-struktur.html, lalu centang butir-butir stylesheet dan tampilan yang telah dipenuhi.

Konten dan tampilan telah menyatu. Tinggal satu lapisan tersisa: penyaringan kategori pada Bagian 4.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

katalog-styling.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Katalog produk Toko Aroma: kopi dan teh pilihan dengan harga yang jelas.">
  <title>Katalog Produk Toko Aroma</title>
  <link rel="stylesheet" href="../styles/style.css">
</head>
<body>
  <header>
    <h1>Toko Aroma</h1>
    <p>Kopi dan teh pilihan, dikirim langsung dari Bandung</p>
  </header>
  <main>
    <ul class="katalog">
      <li class="kartu" data-kategori="kopi">
        <img src="../assets/kopi.svg" alt="Ilustrasi kemasan kopi Toko Aroma" width="120" height="120">
        <h2>Kopi Arabika Gayo</h2>
        <p>Biji kopi single origin dari dataran tinggi Gayo, Aceh. Dipanggang sedang dengan aroma floral dan keasaman ringan.</p>
        <dl>
          <dt>Berat</dt>
          <dd>200 gram</dd>
          <dt>Harga</dt>
          <dd>Rp85.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="kopi">
        <img src="../assets/kopi.svg" alt="Ilustrasi kemasan kopi Toko Aroma" width="120" height="120">
        <h2>Kopi Robusta Lampung</h2>
        <p>Biji kopi robusta dari Lampung dengan rasa pekat dan sentuhan cokelat gelap. Cocok untuk kopi susu gula aren.</p>
        <dl>
          <dt>Berat</dt>
          <dd>200 gram</dd>
          <dt>Harga</dt>
          <dd>Rp60.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="teh">
        <img src="../assets/teh.svg" alt="Ilustrasi gelas teh Toko Aroma" width="120" height="120">
        <h2>Teh Hijau Pegunungan</h2>
        <p>Daun teh hijau dari kebun di Jawa Barat. Diseduh dengan air bersuhu 80 derajat agar rasanya tetap segar.</p>
        <dl>
          <dt>Berat</dt>
          <dd>100 gram</dd>
          <dt>Harga</dt>
          <dd>Rp35.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="teh">
        <img src="../assets/teh.svg" alt="Ilustrasi gelas teh Toko Aroma" width="120" height="120">
        <h2>Teh Melati</h2>
        <p>Teh hijau yang dikeringkan bersama bunga melati sehingga aromanya wangi alami. Pas disantap sore hari.</p>
        <dl>
          <dt>Berat</dt>
          <dd>100 gram</dd>
          <dt>Harga</dt>
          <dd>Rp30.000</dd>
        </dl>
      </li>
    </ul>
  </main>
  <footer>
    <p>&copy; 2025 Toko Aroma</p>
  </footer>
</body>
</html>