Setelah kamu ngerti struktur halaman web, langkah berikutnya yang penting banget adalah belajar CSS. Gampangnya gini: kalau HTML itu ngatur "apa isi" sebuah halaman, CSS yang ngatur "tampilannya" — mulai dari warna, ukuran huruf, jarak antar elemen, sampai posisi sebuah kotak. Jadi CSS inilah yang bikin halaman web keliatan rapi dan enak dipandang, bukan cuma teks polos doang.
CSS itu singkatan dari Cascading Style Sheets. Kata "cascading" maksudnya aturan style bisa saling numpuk dan diwariskan dari elemen induk ke elemen anak. Tenang, konsep ini bakal kerasa masuk akal sambil kamu praktik kok. Nah kalau kamu belum kenal HTML sama sekali, mending baca dulu belajar HTML dasar untuk pemula biar fondasinya kuat.
Cara Menulis CSS
Ada tiga cara umum buat nempelin CSS ke halaman. Yang paling direkomendasiin sih pakai file .css terpisah, soalnya lebih rapi dan gampang dipakai ulang.
<!-- 1. Inline: langsung di atribut style -->
<p style="color: red;">Halo</p>
<!-- 2. Internal: di dalam tag <style> -->
<style>
p { color: blue; }
</style>
<!-- 3. External: file terpisah, dipanggil di <head> -->
<link rel="stylesheet" href="style.css">Buat proyek beneran, pakai cara ketiga. Jadi semua aturan style ngumpul rapi di satu file style.css.
Anatomi Aturan CSS
Satu aturan CSS punya tiga bagian: selector, property, dan value.
p {
color: navy;
font-size: 18px;
}Di contoh itu, p adalah selector (nargetin semua paragraf), color sama font-size itu property, sedangkan navy dan 18px adalah value-nya. Oh iya, jangan lupa titik koma ; di akhir tiap baris property ya.
Mengenal Selector
Selector nentuin elemen mana yang mau dikasih style. Ada beberapa yang wajib kamu kuasai dari awal.
/* Berdasarkan nama tag */
h1 { color: darkblue; }
/* Berdasarkan class (diawali titik) */
.tombol { background: green; }
/* Berdasarkan id (diawali pagar, harus unik) */
#header { padding: 20px; }Di HTML, class sama id-nya kamu pakai kayak gini:
<button class="tombol">Kirim</button>
<div id="header">Judul Situs</div>Tips penting: pakai class buat style yang dipakai berulang, dan id buat elemen unik yang cuma muncul sekali. Dalam praktik sehari-hari, class jauh lebih sering dipakai.
Warna dan Tipografi
Warna bisa ditulis pakai nama (red), kode heksadesimal (#ff0000), atau format rgb() sama hsl(). Yang paling umum dipakai itu format heksadesimal.
body {
background-color: #f4f4f4;
color: #222222;
font-family: Arial, sans-serif;
line-height: 1.6;
}Property font-family nerima daftar font sebagai cadangan: kalau font pertama nggak tersedia, browser bakal pakai yang berikutnya. Sedangkan line-height ngatur jarak antar baris, dan ini ngaruh banget ke kenyamanan baca.
Memahami Box Model
Nah, ini konsep paling fundamental di CSS. Tiap elemen itu dianggap sebagai sebuah kotak yang punya empat lapisan: konten, padding (jarak dalam), border (garis tepi), dan margin (jarak luar).
.kartu {
padding: 16px; /* ruang di dalam, antara isi dan border */
border: 1px solid #ccc;
margin: 24px; /* ruang di luar, antara kotak dan elemen lain */
}Banyak pemula yang bingung bedain padding sama margin. Inget aja gampangnya: padding itu ndorong isi menjauh dari tepi kotak, sedangkan margin ndorong kotak menjauh dari kotak lain.
Satu trik yang ngebantu banget adalah ngatur box-sizing. Secara default, lebar elemen itu nggak ngitung padding dan border, jadinya ukuran sering meleset. Tambahin aja aturan ini di awal file:
* {
box-sizing: border-box;
}Dengan border-box, value width udah termasuk padding dan border. Percaya deh, hidupmu bakal jauh lebih tenang.
Konsep Cascade dan Spesifisitas
Kalau ada dua aturan yang nargetin elemen yang sama, mana yang menang? Nah, di sinilah inti dari kata "cascading". Secara umum, selector yang lebih spesifik yang menang. Urutannya kira-kira gini: id lebih kuat dari class, dan class lebih kuat dari nama tag.
p { color: black; } /* kalah */
.intro { color: gray; } /* lebih kuat */
#utama { color: green; } /* paling kuat */Kalau spesifisitasnya sama, yang menang adalah aturan yang ditulis paling akhir. Makanya, urutan penulisan juga ngaruh. Satu lagi: hindari pakai !important kecuali kepepet banget, soalnya itu bikin kode jadi susah dirawat.
Mengatur Tata Letak
Buat nata posisi elemen, dua alat modern yang paling sering dipakai adalah Flexbox dan Grid. Flexbox cocok buat nata elemen dalam satu baris atau satu kolom, misalnya menu navigasi.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Kalau kamu pengin mendalami ini, ada pembahasan khusus soal memahami Flexbox CSS yang ngebahas contoh sederhana langkah demi langkah.
FAQ
Apakah harus hafal semua property CSS?
Nggak kok. Property CSS itu buanyak banget, dan bahkan dev senior pun sering ngecek ulang. Yang penting kamu paham konsep dasarnya: selector, box model, dan cascade. Sisanya bisa dicari pas lagi butuh.
Mending belajar Flexbox atau Grid dulu?
Mulai dari Flexbox aja, soalnya konsepnya lebih sederhana dan langsung kerasa gunanya buat komponen kecil. Setelah nyaman, baru lanjut ke Grid buat tata letak halaman yang lebih kompleks.
Apakah CSS susah dipelajari?
Dasarnya sih gampang, tapi nata biar rapi di semua ukuran layar itu yang butuh latihan. Kuncinya banyak praktik, bukan banyak ngapalin.
Penutup
Anggap aja CSS itu jembatan antara halaman yang cuma fungsional sama halaman yang beneran enak dilihat. Mulai aja dari selector, warna, dan box model, terus pelan-pelan naik ke tata letak. Tips terakhir yang praktis: buka halaman favoritmu, pencet tombol Inspect di browser, terus amatin CSS-nya. Baca kode orang lain sambil eksperimen sendiri itu cara tercepat buat nguasain CSS.