Membuat Halaman Pertama dengan CSS

Sampai di sini kita sudah mengenal bentuk kode CSS, alur kerja browser, dan tiga cara memasang stylesheet. Sekarang saatnya menggabungkan semuanya menjadi halaman sungguhan. Pada chapter ini kita membangun satu kartu profil dari nol: membuat folder proyek, menulis struktur HTML, memasang berkas CSS, lalu menulis aturan gaya pertama kita. Ikuti langkahnya dengan mengetik kode sendiri, bukan menyalin-tempel, agar pola kerjanya mendarat di tangan kita.

Langkah 1: Membuat Folder Proyek #

Buat folder baru bernama kartu-profil di komputer Anda — lokasinya bebas, misalnya di folder dokumen. Di dalamnya, buat dua berkas kosong: index.html dan styles.css. Nama index.html adalah nama yang dicari browser dan server secara bawaan, sehingga menjadi kebiasaan baku untuk halaman utama. Struktur foldernya seperti ini:

kartu-profil/
├── index.html
└── styles.css

Langkah 2: Menulis Struktur HTML #

Buka index.html dengan editor teks — Visual Studio Code adalah pilihan populer dan gratis — lalu tulis dokumen berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kartu Profil Budi</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <article class="kartu-profil">
    <div class="avatar">BS</div>
    <h1 class="nama">Budi Santoso</h1>
    <p class="peran">Frontend Developer, Bandung</p>
    <p class="bio">Suka mengubah desain menjadi halaman web yang rapi.</p>
    <button class="tombol" type="button">Hubungi Saya</button>
  </article>
</body>
</html>

Simpan berkas, lalu buka index.html di browser dengan mengkliknya dua kali. Untuk sekarang styles.css masih kosong, sehingga halaman hanya memakai gaya bawaan browser:

Mari kita bedah bagian pentingnya:

1. <link rel="stylesheet" href="styles.css">: memasang stylesheet eksternal, persis seperti chapter sebelumnya. Tanpa baris ini, CSS kita tidak akan pernah dimuat.
2. <article class="kartu-profil">: wadah kartu sekaligus elemen semantik untuk konten mandiri; class-nya menjadi hook utama bagi CSS.
3. <div class="avatar">BS</div>: inisial pengganti foto; kotak ini akan kita ubah menjadi lingkaran lewat CSS.
4. Class pada setiap elemen (nama, peran, bio, tombol): memberi target yang presisi tanpa harus menyentuh elemen lain.

Langkah 3: Menulis Aturan CSS Pertama #

Buka styles.css dan tulis aturan berikut:

body {
  margin: 0;
  padding: 48px 16px;
  font-family: system-ui, sans-serif;
  background-color: #eef2f5;
}

.kartu-profil {
  max-width: 320px;
  margin: 0 auto;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgb(15 34 58 / 0.12);
  text-align: center;
}

.avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #0f766e;
  color: #ffffff;
  font-weight: 700;
  font-size: 24px;
}

.nama {
  margin: 0;
  font-size: 22px;
  color: #1f2933;
}

.peran {
  margin: 4px 0 12px;
  font-weight: 600;
  color: #0f766e;
}

.bio {
  margin: 0 0 16px;
  line-height: 1.5;
  color: #52606d;
}

.tombol {
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background-color: #0f766e;
  color: #ffffff;
  font-size: 15px;
}

Simpan, lalu muat ulang halaman di browser.

Demo berikut menampilkan halaman yang baru saja kita bangun — bandingkan dengan tampilan polos pada Langkah 2; seluruh perbedaannya berasal dari satu berkas CSS:

Mari kita bedah logika tiap kelompok aturan:

1. body: menghapus margin bawaan browser, menambahkan padding agar kartu tidak menempel tepi jendela, dan menetapkan font serta latar dasar halaman.
2. .kartu-profil: max-width membatasi lebar kartu, margin: 0 auto mendorongnya ke tengah, sedangkan border-radius dan box-shadow membentuk kesan kartu.
3. .avatar: border-radius: 50% mengubah kotak menjadi lingkaran, dan display: grid dengan place-items: center menaruh inisial tepat di tengahnya.
4. .tombol: menghapus border bawaan browser dan menetapkan latar serta bentuk pil milik sendiri.

Langkah 4: Bermain dengan Nilai #

Sebelum menutup praktik, ubah satu nilai di styles.css: ganti background-color: #0f766e; pada .avatar menjadi #7c4a1e, simpan, lalu muat ulang halaman:

Perubahan itu terjadi tanpa menyentuh satu baris HTML pun. Ulangi eksperimen ini pada border-radius kartu atau warna tombol — kebiasaan mengubah, menyimpan, dan memuat ulang inilah siklus kerja utama seorang frontend developer.

Kesalahan Umum #

Praktik pertama hampir selalu menyisakan momen “kenapa tidak berubah”. Tabel berikut merangkum penyebab yang paling sering ditemui beserta perbaikannya:

Jika gejalanya tidak ada di tabel, buka developer tools browser (tombol F12 pada sebagian besar browser) dan periksa tab Console serta tab Network: pesan di sana biasanya menyebutkan berkas mana yang gagal dimuat.

Ringkasan #

Kita baru saja membangun halaman bergaya pertama dari nol: folder proyek dengan dua berkas, struktur HTML semantik yang dipasangi stylesheet eksternal, dan beberapa aturan CSS dengan selector class. Pola kerjanya — struktur dulu, gaya kemudian, lalu muat ulang untuk melihat hasil — akan kita ulangi di seluruh course ini. Selanjutnya pada section Persiapan Lingkungan kita menyiapkan editor dan browser beserta alat bantunya agar siklus kerja tersebut terasa makin nyaman.