Kamu sudah bisa membangun rangka rumah dengan HTML. Sekarang saatnya mengecat, menata, dan mendekorasi rumah itu agar indah dipandang. Itulah tugas CSS. 🎨
▼ Gunakan ← → atau tombol panah untuk navigasi
Klik kartu mana pun untuk langsung melompat ke materinya.
Setelah bab ini selesai, kamu akan mampu…
CSS = Cascading Style Sheets — bahasa untuk mendandani HTML.
HTML adalah orang dengan baju polos. CSS adalah stylist yang datang dan mengubahnya jadi keren!
Tanpa CSS, halaman web hanya teks hitam-putih membosankan. Dengan CSS kamu bisa mengatur warna, ukuran, posisi, jarak, dan animasi.
"Cascading" = aturan mengalir dari atas ke bawah; aturan yang lebih spesifik / terakhir menang.
🔑 Ingat: HTML = kerangka & isi, CSS = tampilan & gaya.
Setiap aturan CSS punya 3 bagian: Selector, Property, dan Value.
selector { property: value; }
/* Mengatur semua paragraf */
p {
color: gold; /* warna teks */
font-size: 18px; /* ukuran huruf */
text-align: center; /* rata tengah */
}Menempel style langsung di dalam tag lewat atribut style.
Seperti menempel stiker langsung di satu baju. Cepat, tapi hanya untuk satu elemen itu saja.
<p style="color:gold; font-size:20px;">
Teks ini berwarna emas!
</p>
<h1 style="text-align:center;">Judul Tengah</h1>✅ Kelebihan: cepat untuk uji coba 1 elemen.
❌ Kekurangan: berantakan & sulit dirawat bila dipakai banyak.
Teks ini berwarna emas!
Menulis semua style di dalam tag <style> pada bagian <head>.
Aturan gaya disimpan di satu buku catatan di dalam tas (head) — berlaku untuk seluruh halaman ini.
<head>
<style>
body { background: navy; }
p { color: gold; }
</style>
</head>✅ Kelebihan: rapi, satu halaman cukup satu tempat aturan.
❌ Kekurangan: tidak bisa dipakai ulang di halaman lain.
Style ditaruh di file terpisah (style.css) lalu dihubungkan dengan <link>.
Satu buku panduan dipakai oleh banyak halaman sekaligus. Cara paling profesional!
File 1 — index.html
<head>
<link rel="stylesheet" href="style.css">
</head>File 2 — style.css
body { background: navy; }
h1 { color: gold; }⭐ Paling direkomendasikan untuk website nyata.
Tiga cara, kapan memakai yang mana?
| Cara | Ditulis di | Cakupan | Kapan dipakai |
|---|---|---|---|
| Inline | style="..." dalam tag | 1 elemen | Uji cepat / 1 elemen khusus |
| Internal | <style> di head | 1 halaman | Halaman tunggal kecil |
| External | File .css terpisah | Banyak halaman | Website nyata (⭐ terbaik) |
Semakin spesifik dan semakin belakangan ditulis, aturan itu yang menang. Inilah arti kata "Cascading".
4 cara menulis warna: nama, HEX, RGB/RGBA, dan HSL.
Di toko cat, tiap warna punya kode khusus (mis. "RAL 1023"). Di CSS pun sama — komputer butuh kode pasti agar warnanya tepat.
color: red; /* nama */
color: #FFD700; /* HEX */
color: rgb(255, 215, 0); /* RGB */
color: rgba(255,215,0,0.5); /* + alpha*/
color: hsl(51, 100%, 50%); /* HSL */🔸 RGBA punya alpha (0–1) untuk transparansi.
background: rgba(10,14,26,1);
Latar bisa berupa warna polos, gambar, atau gradient.
Dinding kamarmu bisa dicat polos, ditempel poster, atau diberi motif gradasi. Background CSS bekerja persis seperti itu.
background-color: navy;
background-image: url("foto.jpg");
background: linear-gradient(45deg,
gold, cyan);
background-repeat: no-repeat;
background-position: center;Atur jenis, ukuran, ketebalan, dan gaya huruf.
Setiap orang punya gaya tulisan tangan berbeda. Font = gaya tulisan yang dipilih komputer.
font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 700; /* tebal */
font-style: italic; /* miring */🌐 Google Fonts: tambahkan <link> Google Fonts di head, lalu pakai nama font-nya.
Atur posisi, dekorasi, dan jarak teks.
Tombol rata kiri/tengah, garis bawah, huruf KAPITAL — semua yang sudah kamu kenal di Word, ada juga di CSS.
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 2px 2px 6px gold;Garis tepi elemen: atur tebal, gaya, warna, dan kelengkungan.
Bingkai foto bisa tipis, tebal, putus-putus, atau sudutnya membulat. border-radius mengubah persegi jadi lingkaran!
border-width: 4px;
border-style: dashed; /* solid|dotted */
border-color: gold;
/* atau singkat: */
border: 4px solid gold;
border-radius: 16px; /* 50% = bulat */Margin = ruang KOSONG di LUAR elemen.
Margin itu seperti jarak antara mejamu dengan tembok — ruang di luar yang memisahkan elemen satu dengan lainnya.
margin: 20px; /* semua sisi */
margin: 10px 20px; /* atas-bwh | kiri-kanan */
margin-top: 30px; /* satu sisi */
margin: 0 auto; /* tengah! ⭐ */⭐ margin: 0 auto = trik klasik untuk memposisikan ke tengah.
🟧 Area oranye = margin. Geser slider, lihat ruang luar membesar!
Padding = ruang KOSONG di DALAM elemen (antara isi & border).
Padding seperti empuknya bantal sofa — jarak antara kamu (isi) dengan sandaran (border). Membuat konten tidak mepet ke tepi.
padding: 20px; /* semua sisi */
padding: 10px 30px; /* atas-bwh | kiri-kanan */
padding-left: 40px; /* satu sisi */🧮 Box Model: Content → Padding → Border → Margin (dari dalam ke luar).
🟩 Area hijau = padding. Semakin besar, isi makin "lega" dari tepi.
Ukuran elemen: satuan px, %, auto, dan vw/vh.
Ada baju ukuran tetap (px) seperti "S/M/L", dan ada yang menyesuaikan badan (%) seperti karet. CSS punya keduanya.
width: 300px; /* tetap */
width: 50%; /* setengah induk*/
width: 100vw; /* lebar layar */
height: 100vh; /* tinggi layar */
max-width: 600px; /* batas maksimal*/Geser slider — kotak berubah ukuran secara real-time!
Satu kartu menggunakan banyak property sekaligus — atur semuanya secara langsung.
Calon Web Developer 🚀
.kartu {
background: #101524;
color: white;
padding: 24px;
border: 3px solid gold;
border-radius: 16px;
text-align: center;
width: 70%;
box-shadow: 0 0 20px gold;
}✨ Lihat? Hanya dengan beberapa property, sebuah <div> polos berubah jadi kartu profil yang elegan.
Geser slider di kiri dan amati kode mana yang berubah!
Saatnya membangun halaman profil pertamamu! Ini alur pengerjaannya:
👉 Lanjut ke slide berikutnya untuk melihat kode lengkapnya, langkah demi langkah.
Langkah 1: bangun kerangka halaman dengan HTML.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<div class="avatar"></div>
<h1>Nama Kamu</h1>
<p>Pelajar & Calon Web Developer</p>
</header>
<section class="bio">
<h2>Tentang Saya</h2>
<p>Saya siswa kelas 10 yang sedang belajar membuat website.</p>
</section>
<section class="skills">
<h2>Skills</h2>
<span class="chip">HTML</span>
<span class="chip">CSS</span>
<span class="chip">Kreatif</span>
</section>
<footer>© 2026 Nama Kamu</footer>
</body>
</html>🧱 Ini baru "rangka rumah" — masih polos. Di slide berikutnya kita beri "cat & dekorasi" dengan CSS.
Langkah 2: simpan di style.css dan dandani halamannya.
body {
font-family: 'Inter', sans-serif;
margin: 0;
background: #0a0e1a;
color: #fff;
text-align: center;
}
.hero {
background: linear-gradient(135deg, #FFD700, #9B59B6);
padding: 40px 20px;
color: #111;
}
.avatar {
width: 110px; height: 110px;
border-radius: 50%; /* lingkaran */
background: #0a0e1a;
border: 4px solid #fff;
margin: 0 auto 14px; /* tengah */
}
.bio, .skills { padding: 24px; max-width: 600px; margin: 0 auto; }
.chip {
display: inline-block;
background: #FFD700; color: #111;
padding: 6px 16px; border-radius: 20px; margin: 4px;
}
footer { padding: 18px; background: #050810; color: #B0BAD0; }Inilah tampilan website profil yang sudah jadi — semua dari HTML + CSS!
Pelajar & Calon Web Developer
Saya siswa kelas 10 yang sedang belajar membuat website yang keren dengan HTML & CSS.
💪 Ganti "NAMA KAMU", warna, dan skills dengan milikmu sendiri. Selamat, kamu baru saja membuat website pertamamu!
Ubah warna background halaman menjadi navy dan warna teks menjadi emas (gold) menggunakan Internal CSS.
🎯 Target output: Seluruh halaman berlatar navy gelap dengan tulisan berwarna emas.
<style> di dalam <head>.body dengan property background-color: navy; dan color: gold;
Buat sebuah kartu profil dengan sudut membulat, bayangan, dan padding yang nyaman menggunakan External CSS.
🎯 Target output: Sebuah kotak rapi di tengah layar dengan border melengkung dan efek bayangan lembut.
style.css terpisah, hubungkan dengan <link>.border-radius, box-shadow, padding, width, dan margin: 0 auto; untuk ke tengah.
Buat website profil personal 1 halaman yang mencakup: header bergradient, foto profil melingkar (pakai div CSS), section skills, dan footer. Gunakan minimal 8 property CSS yang berbeda.
🎯 Target output: Halaman profil utuh yang mirip dengan hasil Mini Project (slide 22), tetapi dengan datamu sendiri.
background, linear-gradient, color, border-radius, padding, margin, box-shadow, text-align. Lihat kembali slide 20 & 21 sebagai contoh!
Semua yang sudah kamu kuasai di bab ini.
| Property | Fungsi | Contoh Nilai |
|---|---|---|
color | Warna teks | gold, #FFD700 |
background | Latar elemen | navy, linear-gradient(...) |
font-size | Ukuran huruf | 18px, 1.2rem |
text-align | Perataan teks | center, left |
border | Garis tepi | 2px solid gold |
margin | Ruang luar | 20px, 0 auto |
padding | Ruang dalam | 16px |
width / height | Ukuran elemen | 300px, 50% |
"Kode yang baik bukan tentang sempurna,
tapi tentang berani memulai dan terus belajar."
Kamu sudah resmi bisa mendandani halaman web! Dari teks polos menjadi website profil yang indah. 👏
BAB 6 — CSS Layout & Flexbox: belajar menyusun elemen berdampingan, membuat layout responsif, dan menata halaman seperti developer profesional!