MODUL 03 · TAMPILAN

CSS — Memberi Rupa Dasar Web

HTML memberi struktur, tapi CSS yang membuat halaman terlihat enak dipandang. Di modul ini kamu belajar mengatur warna, jarak, dan tata letak halaman.

1. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang mengatur bagaimana elemen HTML ditampilkan — warnanya, ukurannya, posisinya, jaraknya, dan sebagainya. Kalau HTML adalah kerangka rumah, CSS adalah cat, furnitur, dan dekorasinya.

Tanpa CSS, semua website akan terlihat seperti dokumen Word paling polos: teks hitam, font default, tanpa warna atau tata letak yang menarik.

2. Cara Menulis CSS

Ada tiga cara menerapkan CSS ke HTML. Yang paling umum dan direkomendasikan adalah file CSS terpisah:

<!-- di dalam <head> file HTML -->
<link rel="stylesheet" href="style.css">

Lalu di file style.css:

p {
  color: blue;
  font-size: 16px;
}

3. Anatomi Selector dan Aturan CSS

selector {
  properti: nilai;
  properti: nilai;
}

Selector — menentukan elemen mana yang akan diberi style (contoh: p, h1, .kelas, #id)
Properti — aspek apa yang diatur (warna, ukuran, jarak)
Nilai — pengaturan spesifik untuk properti tersebut

Jenis-Jenis Selector

Selector	Contoh	Menargetkan
Tag	`p { }`	Semua elemen `<p>`
Class	`.judul { }`	Elemen dengan `class="judul"`
ID	`#header { }`	Elemen dengan `id="header"`
Turunan	`div p { }`	Semua `<p>` di dalam `<div>`

<p class="judul">Teks ini</p>

.judul {
  color: red;
  font-weight: bold;
}

Class bisa dipakai berulang kali di banyak elemen, sedangkan ID seharusnya unik — hanya dipakai satu kali per halaman.

4. Warna di CSS

Warna bisa ditulis dengan beberapa cara: nama warna, kode HEX, atau RGB.

#5ee0b5

#f0b95e

#e85d75

#5e8cf0

p {
  color: red;              /* nama warna */
  background-color: #5ee0b5; /* kode HEX */
  border-color: rgb(94, 224, 181); /* RGB */
}

Kode HEX adalah cara paling umum dipakai di proyek nyata karena presisinya tinggi — kamu bisa mengambil kode HEX yang cocok dari tool seperti Coolors atau langsung dari Figma.

5. Box Model: Konsep Paling Penting di CSS

Setiap elemen HTML pada dasarnya adalah sebuah kotak. Kotak ini punya 4 lapisan, dari dalam ke luar:

margin

border

padding

content

Content — isi sebenarnya (teks, gambar)
Padding — jarak antara isi dan border (di dalam kotak)
Border — garis pembatas kotak
Margin — jarak antara kotak ini dan elemen lain di luarnya

.kotak {
  padding: 20px;
  border: 2px solid black;
  margin: 16px;
}

Memahami box model adalah kunci untuk mengontrol jarak dan ukuran elemen — sebagian besar masalah "kenapa tampilan ini berantakan" di CSS berakar dari salah paham soal padding, border, dan margin.

6. Flexbox: Mengatur Tata Letak

Flexbox adalah sistem tata letak yang membuat elemen-elemen bisa disusun secara horizontal atau vertikal dengan mudah, lengkap dengan pengaturan jarak dan perataan otomatis.

.container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

Kotak 1

Kotak 2

Kotak 3

↑ Hasil dari display: flex dengan gap: 12px

Beberapa properti flexbox yang paling sering dipakai:

Properti	Fungsi
`display: flex`	Mengaktifkan flexbox pada kontainer
`flex-direction`	Arah susunan: `row` (default) atau `column`
`justify-content`	Perataan horizontal: `center`, `space-between`, dll
`align-items`	Perataan vertikal dalam kontainer
`gap`	Jarak antar elemen anak

7. Latihan Pemahaman

Soal 1: Apa perbedaan utama antara selector class (.nama) dan ID (#nama)?

Jawaban: Class bisa digunakan berulang kali di banyak elemen dalam satu halaman, sedangkan ID seharusnya unik dan hanya dipakai sekali per halaman.

Soal 2: Sebutkan urutan 4 lapisan box model dari dalam ke luar.

Jawaban: Content → Padding → Border → Margin.

Soal 3: Properti apa yang digunakan untuk mengaktifkan flexbox pada sebuah elemen?

Jawaban: display: flex;

Rangkuman Modul Ini

CSS mengatur tampilan elemen HTML: warna, ukuran, jarak, dan tata letak.
Selector (tag, class, ID) menentukan elemen mana yang akan distyle.
Box model (content, padding, border, margin) adalah konsep fundamental yang menentukan ukuran dan jarak setiap elemen.
Flexbox memudahkan penyusunan elemen secara horizontal/vertikal dengan perataan otomatis.

Sekarang halamanmu sudah punya struktur (HTML) dan tampilan (CSS). Tapi semuanya masih statis — tidak bisa merespons klik atau input pengguna. Di modul selanjutnya, JavaScript akan membuat halamanmu benar-benar "hidup".