CSS (Cascading Style Sheets) adalah bahasa buat mengatur tampilan halaman web: warna, ukuran huruf, jarak, sampai tata letak. HTML menentukan isi halaman, CSS menentukan rupanya. Kalau HTML kerangka rumah, CSS cat dan dekorasinya.
🧪 Tebakan cepat: kamu menulis
colour: red;(ejaan Inggris British). Judulnya jadi merah gak? Tebak dulu, jawabannya ada di bagian "Cara 2: tag<style>".
Cara 1: atribut style di tag-nya
<h1 style="color: blue;">Halo Dunia!</h1>
<p>Ini paragraf pertama.</p>
style="..."adalah atribut di tag pembuka<h1>, sama kayak atribut HTML lain. Isinya CSS.coloradalah properti: apa yang mau diubah.colormengatur warna teks.blueadalah nilai: mau diubah jadi apa.:(titik dua) memisahkan properti dan nilai,;(titik koma) menutupnya. Pasangancolor: blue;ini disebut deklarasi.
Hasilnya, judulnya biru, paragrafnya tetap hitam: atribut style cuma kena ke tag tempat dia ditulis. Cara ini disebut inline CSS. Isi tanda kutipnya harus lengkap, properti dan nilai: style="color: red;". Kalau cuma style="red", browser gak tahu apa yang mau dibikin merah.
Cara 2: tag <style>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
Di dalam <style> kamu menulis aturan CSS:
h1adalah selector: elemen mana yang mau diatur. Di sini semua<h1>di halaman.{dan}(kurung kurawal) membungkus semua deklarasi buat selector itu.color: blue;adalah deklarasinya, sama persis kayak di atributstyle.
Hasilnya, semua <h1> di halaman ini biru tanpa satu pun atribut style. Ini disebut internal CSS. Isi <style> harus aturan lengkap. Deklarasi tanpa selector, misalnya <style>color: red;</style>, gak kena ke elemen mana pun.
Nama properti dan nilai ditulis dalam bahasa Inggris ejaan Amerika, huruf per huruf. Jawaban tebakan: colour: red; gak bikin judulnya merah. Browser melewati properti yang gak dia kenal diam-diam, tanpa pesan error.
Cara 3: file CSS sendiri
<link rel="stylesheet" href="style.css">
Aturannya ditulis di file terpisah, style.css, dan tag <link> di <head> memasangnya ke halaman. Ini disebut external CSS. Satu file bisa dipasang di banyak halaman, dan browser cukup men-download-nya sekali lalu menyimpannya (cache). Jadi gaya yang dipakai banyak halaman taruh di file sendiri, gaya kecil buat satu halaman boleh di <style>.
Arti "cascading"
Satu elemen bisa kena beberapa aturan yang saling bertabrakan. CSS memilih pemenangnya: selector yang lebih khusus menang dari yang umum, dan kalau sama kuat, yang ditulis belakangan menang. Aturan yang bertumpuk lalu dipilih pemenangnya inilah arti cascading.
⚠️ Jebakan yang sering ketemu
- Nilai tanpa properti.
style="red"gak ngapa-ngapain. Tulis lengkap:style="color: red;". - Salah ketik nama atribut.
styedianggap atribut lain, jadi gayanya gak terpasang. - Kurung kurawal di antara tag.
{ }cuma dipakai di dalam<style>atau file CSS. Di antara<h1>dan</h1>, dia tampil sebagai teks biasa. <link>tanparel="stylesheet"atau nama file salah. File CSS-nya gak dimuat, halamannya tampil polos.
TL;DR: CSS (Cascading Style Sheets) mengatur tampilan, HTML mengatur isi. Satu deklarasi: properti, titik dua, nilai, titik koma (color: red;). Tiga cara memasangnya: atribut style di satu tag (inline), aturan selector { ... } di tag <style> (internal), atau file .css lewat <link> (external, paling pas kalau dipakai banyak halaman). Kalau aturan bertabrakan, selector yang lebih khusus menang, lalu yang ditulis belakangan.
