Sampai tahap ini halaman profil 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 dua aturan untuk tombol 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 Halaman Profil #

Stylesheet proyek berpegang pada lima prinsip berikut:

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

Custom properties didefinisikan pada pemilih :root, lalu dipakai ulang melalui fungsi var(). Bila palet ingin diganti, kita cukup mengubah nilai di satu tempat. Untuk menyejajarkan logo dan teks pada header, stylesheet memakai flexbox melalui display: flex; dasar-dasarnya 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 Profil - ditulis pada Bagian 3, dipakai Bagian 3 dan 4 */
:root {
  --warna-utama: #1a6b54;
  --warna-teks: #1f2937;
  --warna-latar: #f3f4f6;
  --warna-putih: #ffffff;
  --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,
footer {
  background-color: var(--warna-utama);
  color: var(--warna-putih);
}

header {
  display: flex;
  align-items: center;
  gap: var(--jarak);
  padding: var(--jarak);
}

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

header img {
  width: 56px;
  border-radius: 50%;
}

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

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

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

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

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(31, 41, 55, 0.5);
}

Dua aturan terakhir — button dan dialog — 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 universal * dengan box-sizing: border-box: padding dan border dihitung di dalam lebar elemen, sehingga kartu tidak meluber saat diberi jarak.
  3. Aturan body: font system-ui, tinggi baris 1.6, warna teks gelap, dan latar abu dari palet.
  4. Aturan header dan footer: latar hijau utama dengan teks putih; header memakai display: flex, align-items: center, dan gap agar logo serta teksnya sejajar berdampingan.
  5. Aturan img dan header img: max-width: 100% dengan height: auto membuat gambar menyusut mengikuti wadahnya tanpa mengubah proporsi; aturan header img kemudian menetapkan logo 56px berbentuk bundar.
  6. Aturan main, section, dan h2: container 720px di tengah layar, kartu putih bersudut bulat, dan judul section berwarna hijau.
  7. Aturan button, dialog, dan dialog::backdrop: tombol hijau bersudut bulat, kartu dialog tanpa border bawaan, serta lapisan gelap tembus pandang di belakang dialog.

Menghubungkan Stylesheet ke Halaman #

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

html Cuplikan profil-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 hijau dengan teks putih
  - Tiga section tampil sebagai kartu putih di atas latar abu
  - Judul "Tentang Saya", "Keahlian", dan "Kontak" berwarna hijau
  - Logo tampil bundar dengan lebar 56px

Pemeriksaan Hasil Tahap Ini #

  1. Pastikan styles/style.css berada di folder proyek, lalu buka profil-styling.html di browser.
  2. Perkecil lebar jendela dan amati: kartu mengikuti lebar layar sementara isinya tetap terbaca tanpa meluber.
  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: perilaku interaktif pada Bagian 4.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

profil-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="Profil singkat Budi Santoso, pengembang web pemula yang gemar membangun halaman web.">
  <title>Profil Budi Santoso</title>
  <link rel="stylesheet" href="../styles/style.css">
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram BS" width="56" height="56">
    <div>
      <h1>Budi Santoso</h1>
      <p>Pengembang web pemula di Bandung</p>
    </div>
  </header>
  <main>
    <section id="tentang-saya">
      <h2>Tentang Saya</h2>
      <p>Saya Budi, pengembang web pemula yang menekuni HTML dan CSS selama satu tahun terakhir. Sehari-hari saya membantu pengelola komunitas belajar memelihara situs informasi yang dibangun dengan HTML murni. Tujuan saya menjadi pengembang front-end yang mengutamakan halaman ringan dan mudah diakses siapa pun.</p>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Menyusun dokumen HTML yang valid</li>
        <li>Menata tampilan dengan CSS dasar</li>
        <li>Menambahkan interaksi sederhana dengan JavaScript</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Saya terbuka untuk kolaborasi proyek kecil. Cara menghubungi saya:</p>
      <address>
        Surel: <a href="mailto:[email protected]">[email protected]</a><br>
        Alamat: Jl. Melati No. 10, Bandung
      </address>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>