Dengan gaya bawaan browser, menu dan kontak tampil sebagai dua tumpukan teks serba hitam-putih. Bagian ini menatanya dengan satu file styles/style.css yang berada di folder proyek: palet hangat khas warung makan, tipografi menu yang nyaman dibaca, serta layout dua kolom sederhana. Stylesheet yang sama kita tuliskan tuntas sekali jadi, termasuk aturan form dan dialog yang baru terpakai pada Bagian 4. Materi dasarnya berasal dari section HTML dan CSS; di sini kita menyatukannya untuk kasus nyata.

Prinsip Penataan Warung Melati #

Stylesheet proyek berpegang pada lima prinsip berikut:

  • Palet hangat — amber dan krem — didefinisikan sekali sebagai custom properties, yaitu variabel CSS.
  • Judul memakai keluarga huruf serif Georgia agar bernuansa klasik, sedangkan teks isi tetap system-ui.
  • Layout dua kolom: main memakai display: flex dengan flex-wrap, dan section menu diberi proporsi dua kali lipat section lainnya.
  • Setiap hidangan dipisah garis putus-putus agar daftar harga mudah dipindai.
  • Aturan form, button, dan dialog disiapkan untuk Bagian 4.

Flexbox menyusun section sejajar, sedangkan flex-wrap membuat keduanya menumpuk kembali di layar sempit. Proporsinya diatur lewat flex: 2 1 380px untuk menu dan flex: 1 1 300px untuk kolom lain; angka pertama menentukan perbandingan lebar saat keduanya sejajar.

Isi Stylesheet Proyek #

Berikut isi utuh styles/style.css:

css styles/style.css 
/* Stylesheet proyek Website Restoran - ditulis pada Bagian 3, dipakai Bagian 3 dan 4 */
:root {
  --warna-utama: #b45309;
  --warna-utama-tua: #7c3a06;
  --warna-teks: #292524;
  --warna-latar: #fbf3e4;
  --warna-putih: #ffffff;
  --warna-garis: #ecd9bd;
  --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.hero {
  background-color: var(--warna-utama);
  color: var(--warna-putih);
  padding: 48px var(--jarak);
  text-align: center;
}

header.hero img {
  border-radius: 50%;
}

header.hero h1 {
  margin: 8px 0 4px;
  font-family: Georgia, serif;
  font-size: 2rem;
}

header.hero p {
  margin: 0;
  font-style: italic;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--jarak);
  display: flex;
  flex-wrap: wrap;
  gap: var(--jarak);
  align-items: flex-start;
}

main section {
  flex: 1 1 300px;
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border-radius: 8px;
}

main #menu {
  flex: 2 1 380px;
}

h2 {
  margin-top: 0;
  font-family: Georgia, serif;
  color: var(--warna-utama-tua);
}

dl.menu dt {
  font-weight: bold;
}

dl.menu dd {
  margin: 0 0 var(--jarak);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--warna-garis);
}

address {
  font-style: normal;
  line-height: 1.9;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

caption {
  margin-bottom: 8px;
  text-align: left;
  font-size: 0.9rem;
  color: #6b7280;
}

th,
td {
  padding: 8px;
  border: 1px solid var(--warna-garis);
  text-align: left;
}

form div {
  margin-bottom: var(--jarak);
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}

input,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--warna-garis);
  border-radius: 6px;
  font-size: 1rem;
  background-color: var(--warna-putih);
  color: var(--warna-teks);
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  background-color: var(--warna-utama);
  color: var(--warna-putih);
  cursor: pointer;
}

dialog {
  max-width: 360px;
  padding: var(--jarak);
  border: none;
  border-radius: 8px;
}

dialog::backdrop {
  background-color: rgba(41, 37, 36, 0.5);
}

footer {
  background-color: var(--warna-utama-tua);
  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 kolom tidak meluber saat diberi jarak.
  3. Aturan header.hero: latar amber dengan teks putih di tengah, judul serif berukuran 2rem, tagline miring, dan logo yang dibulatkan.
  4. Aturan main, main section, dan main #menu: flexbox membentuk dua kolom; menu diberi proporsi dua kali lipat, sedangkan setiap section tampil sebagai kartu putih bersudut bulat.
  5. Aturan dl.menu: nama hidangan tebal dan keterangan dipisah garis putus-putus, memberi ritme pada daftar harga.
  6. Aturan address, table, dan th/td: kontak tanpa gaya miring bawaan, tabel bergaris rapi dengan caption kecil.
  7. Aturan form, button, dialog, dan dialog::backdrop: bidang isian selebar kolomnya, tombol amber, serta kartu dialog dengan lapisan gelap tembus pandang di belakangnya — dipakai mulai Bagian 4.

Menghubungkan Stylesheet ke Halaman #

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

html Cuplikan restoran-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:
  - Hero berlatar amber dengan teks putih di tengah
  - Menu dan kontak tampil berdampingan sebagai dua kolom
  - Setiap hidangan terpisah garis putus-putus dengan harga di ujungnya
  - Tabel jam buka bergaris rapi

Pemeriksaan Hasil Tahap Ini #

  1. Pastikan styles/style.css berada di folder proyek, lalu buka restoran-styling.html di browser.
  2. Perkecil lebar jendela dan amati: dua kolom menumpuk menjadi satu tanpa saling menindih.
  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: pemesanan pada Bagian 4.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

restoran-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="Warung Melati menyajikan masakan rumahan Sunda di Bandung setiap hari.">
  <title>Warung Melati - Masakan Rumahan Sunda</title>
  <link rel="stylesheet" href="../styles/style.css">
</head>
<body>
  <header class="hero">
    <img src="../assets/logo-resto.svg" alt="Logo Warung Melati" width="72" height="72">
    <h1>Warung Melati</h1>
    <p>Masakan rumahan Sunda, disajikan hangat sejak 2015</p>
  </header>
  <main>
    <section id="menu">
      <h2>Menu Hari Ini</h2>
      <dl class="menu">
        <dt>Nasi Timbel Ayam</dt>
        <dd>Nasi putih hangat dengan ayam goreng, tahu, tempe, sambal, dan lalapan. Rp25.000</dd>
        <dt>Soto Bandung</dt>
        <dd>Kuah bening berisi irisan daging sapi, kacang tanah, dan emping. Rp20.000</dd>
        <dt>Pepes Ikan Mas</dt>
        <dd>Ikan mas berbumbu kuning yang dikukus dalam daun pisang. Rp28.000</dd>
        <dt>Es Cincau Hijau</dt>
        <dd>Cincau hijau dengan kuah gula merah dan santan. Rp8.000</dd>
      </dl>
    </section>
    <section id="kontak">
      <h2>Kontak dan Jam Buka</h2>
      <address>
        Jl. Melati No. 10, Bandung<br>
        Telepon: <a href="tel:+6281200001111">0812-0000-1111</a><br>
        Surel: <a href="mailto:[email protected]">[email protected]</a>
      </address>
      <table>
        <caption>Jam buka</caption>
        <thead>
          <tr>
            <th scope="col">Hari</th>
            <th scope="col">Jam Operasional</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Senin - Jumat</th>
            <td>08.00 - 20.00</td>
          </tr>
          <tr>
            <th scope="row">Sabtu - Minggu</th>
            <td>07.00 - 21.00</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Warung Melati</p>
  </footer>
</body>
</html>