Sampai tahap ini halaman dokumentasi tampil dengan gaya bawaan browser: dua wilayah menumpuk dan daftar navigasi tampak seperti daftar teks biasa. Bagian ini menatanya dengan satu file styles/style.css yang berada di folder proyek, sejajar dengan folder assets dan tests. Seluruh tahap selanjutnya memakai stylesheet yang sama, sehingga kita menuliskannya sekali hingga tuntas — termasuk aturan untuk kolom saring yang baru terpakai pada Bagian 4. Materi dasarnya berasal dari section HTML dan CSS; di sini kita menyatukannya untuk kasus dokumentasi.

Prinsip Penataan Halaman Dokumentasi #

Stylesheet proyek berpegang pada lima prinsip berikut:

  • Palet warna konsisten yang didefinisikan sekali sebagai custom properties, yaitu variabel CSS.
  • Main disandingkan dua kolom dengan grid: sidebar selebar 240px dan artikel mengisi sisanya.
  • Sidebar sticky: selama artikel tergulir, daftar topik tetap menempel di posisi atas.
  • Tipografi khusus untuk pre, code, dan kbd agar contoh format serta pintasan mudah dikenali.
  • Jarak seragam 16px dari custom property --jarak, termasuk kelipatannya untuk jarak besar.

Custom properties didefinisikan pada pemilih :root, lalu dipakai ulang melalui fungsi var(). Bila palet ingin diganti, kita cukup mengubah nilai di satu tempat. Untuk menyandingkan sidebar dan artikel, stylesheet memakai grid melalui display: grid; dasar tata letaknya pernah disinggung pada section HTML dan CSS, dan rujukan lengkapnya ada di akhir bagian ini.

Isi Stylesheet Proyek #

Berikut isi utuh styles/style.css:

css styles/style.css 
/* Stylesheet proyek Halaman Dokumentasi - ditulis pada Bagian 3, dipakai Bagian 3 dan 4 */
:root {
  --warna-utama: #1d4ed8;
  --warna-teks: #1f2937;
  --warna-latar: #f8fafc;
  --warna-putih: #ffffff;
  --warna-border: #cbd5e1;
  --warna-kode: #eef2ff;
  --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 {
  display: flex;
  align-items: center;
  gap: var(--jarak);
  padding: var(--jarak) calc(var(--jarak) * 2);
  background-color: var(--warna-utama);
  color: var(--warna-putih);
}

header h1 {
  margin: 0;
  font-size: 1.25rem;
}

header p {
  margin: 0;
  font-size: 0.9rem;
}

main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: calc(var(--jarak) * 2);
  max-width: 1024px;
  margin: 0 auto;
  padding: calc(var(--jarak) * 2);
}

main > nav {
  position: sticky;
  top: var(--jarak);
  align-self: start;
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border: 1px solid var(--warna-border);
  border-radius: 8px;
}

main > nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

main > nav li {
  margin-bottom: 8px;
}

main > nav a {
  color: var(--warna-utama);
  text-decoration: none;
}

main > nav a:hover {
  text-decoration: underline;
}

/* Kolom saring topik (Bagian 4) */
main > nav label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

main > nav input {
  width: 100%;
  margin-bottom: var(--jarak);
  padding: 8px;
  font: inherit;
  border: 1px solid var(--warna-border);
  border-radius: 6px;
}

article {
  padding: calc(var(--jarak) * 1.5);
  background-color: var(--warna-putih);
  border: 1px solid var(--warna-border);
  border-radius: 8px;
}

article h2 {
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--warna-border);
  color: var(--warna-utama);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--jarak);
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
}

.breadcrumb a {
  color: var(--warna-utama);
}

.toc {
  margin-bottom: calc(var(--jarak) * 1.5);
  padding: var(--jarak);
  background-color: var(--warna-latar);
  border: 1px solid var(--warna-border);
  border-radius: 8px;
}

.toc-label {
  margin: 0 0 8px;
  font-weight: 700;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
}

table {
  width: 100%;
  margin: var(--jarak) 0;
  border-collapse: collapse;
}

caption {
  padding-bottom: 8px;
  font-weight: 700;
  text-align: left;
}

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

kbd {
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.9em;
  background-color: var(--warna-latar);
  border: 1px solid var(--warna-border);
  border-radius: 4px;
}

code {
  padding: 2px 4px;
  font-family: monospace;
  background-color: var(--warna-kode);
  border-radius: 4px;
}

pre {
  padding: var(--jarak);
  overflow-x: auto;
  background-color: var(--warna-kode);
  border-radius: 8px;
}

pre code {
  padding: 0;
  background-color: transparent;
}

address {
  font-style: normal;
}

footer {
  padding: var(--jarak) calc(var(--jarak) * 2);
  text-align: center;
  background-color: var(--warna-putih);
  border-top: 1px solid var(--warna-border);
}

footer p {
  margin: 0;
}

@media (max-width: 700px) {
  main {
    display: block;
  }

  main > nav {
    position: static;
    margin-bottom: var(--jarak);
  }
}

Dua kelompok aturan terakhir pada nav — label dan input — dipakai mulai Bagian 4. Menuliskannya sekarang membuat stylesheet tuntas sekali jadi, tanpa perlu menyunting file yang sama di dua tahap berbeda.

Mari kita bedah aturan-aturan pentingnya:

  1. Blok :root: enam custom properties — lima warna palet dan --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 main: display: grid dengan dua kolom, yaitu 240px untuk sidebar dan minmax(0, 1fr) untuk artikel; nilai minmax membuat artikel boleh menyusut tanpa mendorong kolom lain.
  4. Aturan main > nav: position: sticky dengan top: var(--jarak) membuat daftar topik menempel saat halaman tergulir. Pemilih > membatasi aturan ini hanya pada nav langsung di dalam main, sehingga nav breadcrumb dan nav toc di dalam article tidak ikut. Pasangan align-self: start wajib ada: tanpa aturan itu, grid meregangkan nav setinggi barisnya dan sticky kehilangan ruang untuk bergeser.
  5. Aturan breadcrumb dan toc: ol breadcrumb ditata horizontal dengan pemisah tanda › lewat pseudo-element ::before, sedangkan kotak toc diberi latar berbeda agar terlihat sebagai ringkasan.
  6. Aturan kbd, code, dan pre: ketiganya memakai huruf monospace; code diberi latar biru muda, pre diberi kotak berlatar sama dengan overflow-x: auto untuk baris panjang, dan pre code dikembalikan polos agar kode di dalam blok tidak berganda latarnya.
  7. Media query akhir: pada layar sempit (maksimum 700px) main kembali display: block dan nav kembali position: static, sehingga pengunjung ponsel membaca daftar topik lebih dulu tanpa kolom sempit.

Menghubungkan Stylesheet ke Halaman #

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

html Cuplikan dokumentasi-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:
  - Header berlatar biru dengan teks putih
  - Sidebar dan artikel tampil berdampingan sebagai dua kartu putih
  - Saat artikel tergulir, daftar topik tetap menempel di atas
  - Breadcrumb tampil horizontal, toc berada di kotak berlatar abu
  - Tabel pintasan memiliki garis pembatas rapi dan contoh format tampil di kotak kode

Pemeriksaan Hasil Tahap Ini #

  1. Pastikan styles/style.css berada di folder proyek, lalu buka dokumentasi-styling.html di browser.
  2. Gulir artikel sampai bagian Dukungan; daftar topik harus tetap terlihat menempel di bagian atas viewport.
  3. Perkecil lebar jendela hingga di bawah 700px; kedua wilayah menumpuk kembali dan sidebar tampil sebagai kartu biasa.
  4. Buka tests/cek-struktur.html, lalu centang butir-butir stylesheet dan tampilan yang telah dipenuhi.

Konten, navigasi, dan tampilan telah menyatu. Tinggal satu lapisan tersisa: kolom saring topik pada Bagian 4.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

dokumentasi-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="Dokumentasi CatatKu: panduan penggunaan aplikasi pencatat ringan dari Komunitas Belajar Web.">
  <title>Dokumentasi CatatKu</title>
  <link rel="stylesheet" href="../styles/style.css">
</head>
<body>
  <header>
    <img src="../assets/logo-docs.svg" alt="Logo Dokumentasi CatatKu" width="48" height="48">
    <div>
      <h1>Dokumentasi CatatKu</h1>
      <p>Panduan pengguna aplikasi pencatat ringan</p>
    </div>
  </header>
  <main>
    <nav aria-label="Daftar topik">
      <ul>
        <li><a href="#pengenalan">Pengenalan</a></li>
        <li><a href="#memulai">Memulai</a></li>
        <li><a href="#memformat">Memformat Catatan</a></li>
        <li><a href="#pintasan">Pintasan Keyboard</a></li>
        <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
      </ul>
    </nav>
    <article>
      <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol>
          <li><a href="www.example.com">Beranda</a></li>
          <li aria-current="page">Dokumentasi</li>
        </ol>
      </nav>
      <nav class="toc" aria-label="Di halaman ini">
        <p class="toc-label">Di halaman ini</p>
        <ol>
          <li><a href="#pengenalan">Pengenalan</a></li>
          <li><a href="#memulai">Memulai</a></li>
          <li><a href="#memformat">Memformat Catatan</a></li>
          <li><a href="#pintasan">Pintasan Keyboard</a></li>
          <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
          <li><a href="#dukungan">Dukungan</a></li>
        </ol>
      </nav>
      <h2 id="pengenalan">Pengenalan</h2>
      <p>CatatKu adalah aplikasi pencatat ringan untuk komputer dan ponsel yang dikembangkan oleh Komunitas Belajar Web. Aplikasi ini menyimpan catatan secara lokal, sehingga tulisan tetap terbaca meski perangkat tidak terhubung ke internet. Halaman dokumentasi ini merangkum topik yang paling sering dicari pengguna baru.</p>
      <h2 id="memulai">Memulai</h2>
      <p>Tiga langkah berikut menyiapkan catatan pertama di CatatKu:</p>
      <ol>
        <li>Unduh CatatKu dari halaman unduhan di situs Komunitas Belajar Web, lalu pasang seperti aplikasi biasa.</li>
        <li>Buka aplikasi, tekan pintasan <kbd>Ctrl</kbd>+<kbd>N</kbd>, atau pilih menu Catatan lalu Catatan Baru.</li>
        <li>Tulis isi catatan; CatatKu menyimpan perubahan secara otomatis setiap beberapa detik.</li>
      </ol>
      <h2 id="memformat">Memformat Catatan</h2>
      <p>CatatKu memakai penanda sederhana untuk memformat teks. Tanda bintang ganda membuat teks tampil tebal, tanda bintang tunggal membuat teks tampil miring, dan tanda pagar di awal baris menjadikan baris tersebut judul bagian.</p>
      <pre><code># Rencana belajar pekan ini
- Menulis ulang catatan *struktur tabel*
- Membaca catatan **pintasan keyboard** dua kali</code></pre>
      <h2 id="pintasan">Pintasan Keyboard</h2>
      <p>Pintasan berikut mempercepat pekerjaan sehari-hari tanpa menyentuh menu:</p>
      <table>
        <caption>Pintasan keyboard pada CatatKu versi desktop</caption>
        <thead>
          <tr>
            <th scope="col">Pintasan</th>
            <th scope="col">Fungsi</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>N</kbd></td>
            <td>Membuat catatan baru</td>
          </tr>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
            <td>Menyimpan salinan catatan aktif</td>
          </tr>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>F</kbd></td>
            <td>Mencari teks di dalam catatan terbuka</td>
          </tr>
        </tbody>
      </table>
      <h2 id="berbagi">Menyimpan dan Berbagi</h2>
      <p>Selain menyimpan otomatis, menu Berkas menyediakan opsi Ekspor Catatan. Hasil ekspor berupa berkas teks yang dapat dikirim lewat surel atau dibuka di aplikasi teks apa pun. Untuk berbagi seluruh arsip, menu yang sama menyediakan opsi Cadangkan.</p>
      <h2 id="dukungan">Dukungan</h2>
      <p>Menemui kendala saat memakai CatatKu? Tim dokumentasi memantau surel dukungan pada hari kerja. Sertakan versi aplikasi dan langkah yang memunculkan kendala agar pertanyaan cepat terjawab.</p>
      <address>
        Surel dukungan: <a href="mailto:[email protected]">[email protected]</a>
      </address>
    </article>
  </main>
  <footer>
    <p>Dokumentasi CatatKu — dikelola oleh Komunitas Belajar Web.</p>
  </footer>
</body>
</html>