Sampai tahap ini portofolio tampil dengan gaya bawaan browser. 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 tautan aktif dan tombol ke atas yang baru terpakai pada Bagian 4. Materi dasarnya berasal dari section HTML dan CSS; di sini kita menyatukannya untuk kasus nyata.

Prinsip Penataan Portofolio #

Stylesheet proyek berpegang pada lima prinsip berikut:

  • Palet biru konsisten yang didefinisikan sekali sebagai custom properties, yaitu variabel CSS.
  • Skala jarak seragam 16px agar renggangan antarbagian terasa rapi.
  • Container utama selebar maksimum 960px yang menengahkan konten pada layar lebar.
  • Section tampil sebagai kartu putih di atas latar abu, dengan setiap article dipisah garis tipis.
  • Gambar dibatasi max-width: 100% supaya tidak meluber dari wadahnya.

Dua keputusan lainnya menyiapkan interaksi Bagian 4. Pertama, aturan scroll-behavior: smooth pada html membuat lompatan tautan anchor digulir dengan halus oleh browser. Kedua, tautan nav yang membawa class aktif digarisbawahi — statusnya yang akan diatur JavaScript nanti.

Isi Stylesheet Proyek #

Berikut isi utuh styles/style.css:

css styles/style.css 
/* Stylesheet proyek Website Portofolio - ditulis pada Bagian 3, dipakai Bagian 3 dan 4 */
:root {
  --warna-utama: #2451b3;
  --warna-teks: #1f2937;
  --warna-latar: #f3f4f6;
  --warna-putih: #ffffff;
  --jarak: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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 img {
  width: 56px;
  height: auto;
  border-radius: 50%;
}

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

nav a {
  color: var(--warna-putih);
  text-decoration: none;
  font-weight: 600;
}

nav a.aktif {
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

section {
  margin-bottom: calc(var(--jarak) * 2);
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border-radius: 8px;
}

h2 {
  margin-top: 0;
  color: var(--warna-utama);
}

article {
  margin-top: var(--jarak);
  padding-top: var(--jarak);
  border-top: 1px solid #d1d5db;
}

img {
  max-width: 100%;
  height: auto;
}

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

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

.tombol-atas {
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background-color: var(--warna-teks);
  color: var(--warna-putih);
  cursor: pointer;
}

Aturan nav a.aktif dan .tombol-atas 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: lima custom properties — empat warna palet dan --jarak 16px — yang dipakai ulang oleh seluruh aturan lain melalui var().
  2. Aturan html: scroll-behavior: smooth menghaluskan pengguliran saat tautan anchor melompat antar-section.
  3. Aturan universal * dengan box-sizing: border-box: padding dan border dihitung di dalam lebar elemen, sehingga kartu tidak meluber saat diberi jarak.
  4. Aturan header dan nav: latar biru utama dengan teks putih; nav ul memakai flexbox (display: flex dengan gap dan flex-wrap) agar tautan sejajar dan menyesuaikan diri pada layar sempit.
  5. Aturan main dan section: container 960px di tengah layar dan kartu putih bersudut bulat untuk setiap section.
  6. Aturan article: garis atas tipis (border-top) memisahkan setiap proyek tanpa perlu elemen tambahan.
  7. Aturan img: max-width: 100% dengan height: auto membuat gambar menyusut mengikuti wadahnya tanpa mengubah proporsi.
  8. Aturan .tombol-atas: tombol melayang (position: fixed) di sudut kanan bawah, selalu terjangkau di halaman panjang.

Menghubungkan Stylesheet ke Halaman #

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

html Cuplikan portofolio-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 dan footer berlatar biru dengan teks putih
  - Tautan nav tersusun sejajar di dalam header
  - Empat section tampil sebagai kartu putih di atas latar abu
  - Klik tautan nav kini menggulir halaman dengan halus

Pemeriksaan Hasil Tahap Ini #

  1. Pastikan styles/style.css berada di folder proyek, lalu buka portofolio-styling.html di browser.
  2. Klik tautan nav “Keahlian” dan amati penggulirannya; lompatan terasa halus, bukan melompat seketika.
  3. Buka tests/cek-struktur.html, lalu centang butir-butir stylesheet dan tampilan yang telah dipenuhi.

Tampilan dan pengguliran telah halus. Tinggal satu lapisan tersisa: status navigasi yang ikut berubah pada Bagian 4.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

portofolio-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="Portofolio Siti Rahma, pengembang web yang fokus pada halaman cepat dan aksesibel.">
  <title>Portofolio Siti Rahma</title>
  <link rel="stylesheet" href="../styles/style.css">
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram SR" width="56" height="56">
    <div>
      <h1>Siti Rahma</h1>
      <p>Pengembang web: antarmuka cepat dan aksesibel</p>
    </div>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#proyek">Proyek</a></li>
        <li><a href="#keahlian">Keahlian</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="beranda">
      <h2>Selamat Datang</h2>
      <p>Saya membangun halaman web yang rapi dari sisi struktur dan ringan dari sisi ukuran berkas. Jelajahi daftar proyek di bawah, lalu hubungi saya bila ada ide yang ingin dikembangkan bersama.</p>
      <p><a href="#proyek">Lihat daftar proyek</a></p>
    </section>
    <section id="proyek">
      <h2>Proyek Pilihan</h2>
      <article>
        <h3>Galeri Foto Kelas</h3>
        <p>Halaman galeri untuk karya fotografi siswa, dibangun dengan figure dan img yang membawa atribut alt lengkap.</p>
        <p><a href="www.example.com/galeri-foto-kelas">www.example.com/galeri-foto-kelas</a></p>
      </article>
      <article>
        <h3>Buku Resep Dapur</h3>
        <p>Kumpulan resep keluarga yang disusun per kategori dengan daftar bersarang dan tabel takaran.</p>
        <p><a href="www.example.com/buku-resep">www.example.com/buku-resep</a></p>
      </article>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Struktur dokumen HTML yang semantik</li>
        <li>Tabel dan daftar untuk konten terstruktur</li>
        <li>Optimasi gambar agar halaman tetap ringan</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Surel: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Siti Rahma</p>
  </footer>
</body>
</html>