Peta visual untuk memahami cascade, box model, Flexbox, Grid, responsivitas, state, motion yang aman, dan cara men-debug tampilan.
CSS memilih bagian HTML melalui selector, lalu memberi pasangan property dan value di dalam kurung kurawal.
Satu ruleset dapat berisi beberapa declaration. Titik dua memisahkan property dan value; titik koma memisahkan declaration.
h2 {
color: navy;
font-size: 1.5rem;
}Ingat: Baca sebagai: pilih semua h2, lalu ubah warna dan ukurannya.
CSS hanya mengatur tampilan. Gunakan class untuk pola visual yang dipakai berulang tanpa mengganti arti elemen HTML.
<article class="kartu">...</article>
.kartu {
border: 1px solid silver;
}Ingat: Nama class sebaiknya menjelaskan komponen, bukan sekadar warnanya.
Beberapa aturan dapat mengenai elemen yang sama. Browser memilih hasil berdasarkan asal aturan, tingkat penting, specificity, lalu urutan penulisan.
Selector elemen berlaku luas, class dapat digunakan berulang, sedangkan ID harus unik pada satu halaman.
p { color: #475569; }
.catatan { color: #0369a1; }
#penting { color: #b91c1c; }Ingat: Utamakan class untuk komponen yang dapat dipakai kembali.
Spasi memilih keturunan, tanda > memilih child langsung, dan koma menerapkan declaration yang sama pada beberapa selector.
.kartu h3 { margin-bottom: 0.5rem; }
nav > a { text-decoration: none; }
h1, h2 { line-height: 1.2; }Ingat: Jaga selector tetap pendek agar mudah dirawat dan tidak terlalu spesifik.
Warna membantu membangun hierarki, tetapi informasi tidak boleh bergantung pada warna saja. Pastikan teks tetap kontras dengan latarnya.
Pisahkan warna permukaan, teks utama, teks pendukung, dan aksen aksi agar desain lebih konsisten.
:root {
--latar: #f8fafc;
--teks: #0f172a;
--aksen: #0369a1;
}
body {
background-color: var(--latar);
color: var(--teks);
}Ingat: Uji keterbacaan pada layar redup, terang, dan ukuran teks yang berbeda.
Jenis huruf, ukuran, jarak baris, dan panjang baris bekerja bersama agar pengguna tidak cepat lelah.
Gunakan ukuran relatif agar tulisan mengikuti preferensi pengguna, lalu beri line-height yang cukup.
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
h1 { font-size: 2rem; }Ingat: Paragraf panjang biasanya lebih nyaman pada line-height sekitar 1.5–1.7.
Kotak CSS terdiri dari content, padding, border, dan margin. Memahami lapisan ini mencegah ukuran komponen terasa misterius.
Border-box membuat width mencakup content, padding, dan border sehingga perhitungan ukuran lebih mudah.
* { box-sizing: border-box; }
.panel {
width: 100%;
max-width: 36rem;
padding: 1.25rem;
border: 1px solid #cbd5e1;
margin-inline: auto;
}Ingat: Gunakan padding untuk ruang di dalam komponen dan margin untuk hubungan dengan komponen lain.
px berguna untuk detail kecil, sedangkan rem, %, dan viewport unit membantu ukuran mengikuti konteks serta preferensi pengguna.
Width 100% membolehkan elemen mengecil, sementara max-width mencegahnya terlalu lebar pada monitor besar.
.konten {
width: min(100% - 2rem, 68rem);
margin-inline: auto;
}
img {
max-width: 100%;
height: auto;
}Ingat: Hindari lebar tetap besar yang memaksa pengguna ponsel menggulir ke samping.
Flexbox mengatur child langsung di sepanjang main axis dan cross axis. Ia cocok untuk navigasi, toolbar, dan deretan kartu.
Display flex mengaktifkan konteks Flexbox. Gap memberi jarak konsisten dan wrap memberi item izin pindah baris.
.daftar-kartu {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.daftar-kartu > article {
flex: 1 1 15rem;
}Ingat: Flexbox hanya mengatur child langsung dari flex container.
Justify-content bekerja pada main axis; align-items bekerja pada cross axis.
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}Ingat: Periksa flex-direction sebelum menebak arah justify-content.
Mulai dari layar kecil, lalu gunakan media query ketika isi benar-benar membutuhkan ruang tambahan—bukan berdasarkan merek perangkat.
Style di luar media query berlaku untuk ponsel. Pada viewport lebih lebar, susunan dapat ditingkatkan tanpa merusak isi.
.menu {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 48rem) {
.menu { flex-direction: row; }
}Ingat: Ubah layout saat konten mulai sesak, bukan karena mengejar satu ukuran ponsel tertentu.
Interaksi hover tidak cukup untuk pengguna keyboard. Sediakan focus-visible yang jelas dan jangan menghapus outline tanpa pengganti.
a:hover { color: #075985; }
a:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}Ingat: Coba tekan Tab untuk memastikan posisi fokus selalu terlihat.
Position menentukan cara sebuah kotak ditempatkan. Relative membuat titik acuan; absolute dapat menempel pada acuan terdekat; z-index mengatur urutan lapisan.
Elemen absolute mencari ancestor terdekat yang memiliki position selain static. Karena itu, beri position relative pada komponen yang menjadi batasnya.
.kartu { position: relative; }
.label {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}Ingat: Tanpa titik acuan, label dapat menempel pada area halaman yang tidak kamu harapkan.
Gunakan z-index kecil dan terencana pada elemen yang memang bertumpuk. Nilainya bekerja pada konteks lapisan yang sesuai.
.label {
z-index: 2;
background-color: #0f766e;
color: white;
}Ingat: Mulai dari 1 atau 2; angka sangat besar biasanya menutupi masalah struktur lapisan.
Position sticky membuat elemen mengikuti guliran setelah mencapai offset seperti top. Ia tetap dibatasi oleh kontainer induknya.
.ringkasan {
position: sticky;
top: 1rem;
}Ingat: Sticky adalah eksplorasi lanjutan pada unit ini dan tidak wajib untuk menuntaskan stage.
Pseudo-class seperti :nth-child() memilih elemen berdasarkan urutannya di dalam parent, sehingga pola dapat dibuat tanpa class tambahan.
Gunakan odd untuk child urutan ganjil dan even untuk child urutan genap.
.jadwal li:nth-child(odd) { background: #f8fafc; }
.jadwal li:nth-child(even) { background: #e0f2fe; }Ingat: Urutan dihitung di dalam parent dan dimulai dari 1, bukan 0.
Pola 3n memilih setiap urutan ketiga; 3n+1 memulai dari item pertama lalu melompat tiga posisi.
.galeri article:nth-child(3n) {
border-color: #f59e0b;
}Ingat: Mulai dari odd/even. Gunakan rumus hanya ketika pola tampilan memang membutuhkannya.
::before dan ::after membuat kotak virtual di awal atau akhir isi elemen. Keduanya cocok untuk dekorasi yang tidak membawa informasi penting.
Pseudo-element biasanya membutuhkan property content, termasuk content kosong jika bentuknya dibuat melalui border atau background.
.kutipan::before {
content: "“";
color: #0f766e;
font-size: 3rem;
}Ingat: Jangan memindahkan pesan utama ke content karena pembaca layar dapat memperlakukannya secara berbeda.
Penanda kecil dapat ditempatkan setelah teks tanpa menambah span kosong pada HTML.
.tautan::after {
content: " →";
margin-left: 0.25rem;
}Ingat: Pastikan tautan tetap dapat dipahami walau tanda panah tidak terlihat.
Grid membagi ruang menjadi baris dan kolom. Ia cocok ketika posisi horizontal dan vertikal perlu dikendalikan bersama.
Browser dapat membuat jumlah kolom berdasarkan ruang yang tersedia, sementara minmax menjaga kartu tidak terlalu kecil.
.galeri {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}Ingat: Grid mengatur child langsung dari grid container.
Grid-template-areas menggambarkan denah halaman, kemudian setiap komponen ditempatkan menggunakan grid-area.
.layout {
display: grid;
grid-template-areas: "header header" "aside main";
}
header { grid-area: header; }
aside { grid-area: aside; }
main { grid-area: main; }Ingat: Setiap baris area harus memiliki jumlah kolom yang sama.
Fungsi min(), max(), dan clamp() membuat ukuran mengikuti viewport sambil tetap memiliki batas aman.
clamp menerima nilai minimum, nilai pilihan yang fluid, dan nilai maksimum.
h1 { font-size: clamp(2rem, 6vw, 4rem); }
.container { width: min(100% - 2rem, 70rem); }Ingat: Nilai fluid tetap perlu batas minimum dan maksimum yang masuk akal.
Hover, focus-visible, dan active memberi feedback berbeda. Jangan hanya mengandalkan hover karena layar sentuh dan keyboard bekerja berbeda.
Hover merespons pointer, focus-visible membantu keyboard, dan active berlangsung ketika kontrol sedang ditekan.
.aksi:hover { background: #075985; }
.aksi:focus-visible { outline: 3px solid #f59e0b; }
.aksi:active { transform: translateY(1px); }Ingat: Focus harus terlihat jelas, bukan sekadar perubahan warna yang sangat tipis.
Transisi menjelaskan perubahan state; keyframes cocok untuk rangkaian gerak. Selalu sediakan pilihan reduced motion.
Transform dan opacity biasanya lebih mulus. Batasi durasi dan jangan menganimasikan semuanya.
.kartu { transition: transform 180ms ease; }
.kartu:hover { transform: translateY(-0.25rem); }Ingat: Hindari transition: all karena perubahan yang tidak dimaksud dapat ikut dianimasikan.
Media query ini mematikan atau menyederhanakan gerakan bagi pengguna yang meminta lebih sedikit animasi.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms;
transition-duration: 0.01ms;
}
}Ingat: Reduced motion adalah kebutuhan aksesibilitas, bukan pilihan kosmetik.
Custom property memudahkan pergantian tema. Prefers-color-scheme dapat mengikuti perangkat, tetapi kontras dan focus tetap harus diperiksa.
Deklarasikan token dasar, lalu ganti nilainya pada preferensi gelap tanpa mengulang semua selector komponen.
:root { --surface: #fff; --text: #0f172a; }
@media (prefers-color-scheme: dark) {
:root { --surface: #0f172a; --text: #f8fafc; }
}Ingat: Periksa kontras kedua tema dan jangan menyampaikan status lewat warna saja.
Perbaikan dimulai dari bukti: cari elemen yang meluber, selector yang kalah, ukuran tetap, dan state keyboard yang hilang.
Gambar, teks panjang, dan width tetap sering menjadi sumber overflow. Perbaiki sumbernya, jangan menyembunyikan seluruh overflow halaman.
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
.kartu { overflow-wrap: anywhere; }Ingat: overflow-x: hidden pada body dapat menutupi masalah tanpa menyelesaikannya.
Naikkan specificity hanya ketika konteks membutuhkannya. Hindari !important sebagai jalan pintas.
.kartu p { color: #334155; }
.kartu .status { color: #047857; }Ingat: Gunakan DevTools computed styles untuk melihat sumber declaration yang aktif.
Materi ditulis ulang secara orisinal untuk siswa SMP dengan mengacu pada prinsip CSS modern, layout responsif, dan aksesibilitas.