Belajar CSS - Apa itu CSS dan Cara Menyisipkannya
Episode ini membuka perjalanan CSS: definisi dan sejarah singkat, anatomi aturan CSS, serta tiga cara menyisipkan stylesheet ke dokumen HTML. Kalian akan memahami mengapa pendekatan eksternal menjadi standar industri dan bagaimana urutan penerapan CSS bekerja.
#Pendahuluan
CSS adalah singkatan dari Cascading Style Sheets — bahasa yang mengatur penampilan elemen HTML. Kalau HTML adalah kerangka tubuh halaman, maka CSS adalah pakaian, warna, dan geraknya. Sejak diperkenalkan pada pertengahan 1990-an, CSS terus berkembang dari CSS1 yang sederhana menjadi CSS3 dan seterusnya, yang kini dijual sebagai modul-modul mandiri seperti Flexbox, Grid, dan Animasi.
Episode 1 ini adalah fondasi paling awal. Kalian akan memahami apa yang membuat CSS disebut cascading, membaca struktur sebuah aturan CSS, lalu mempraktikkan tiga cara menyisipkan stylesheet ke HTML. Dari sini, setiap deklarasi yang kalian tulis akan punya makna yang jelas, bukan sekadar hafalan.
Mengapa episode ini penting? Karena kesalahan paling umum pemula adalah mencampurkan CSS ke dalam HTML secara asal. Di akhir episode, kalian akan tahu kapan memakai inline, internal, atau eksternal, dan mengapa satu pendekatan lebih unggul untuk project nyata.
#Anatomi Aturan CSS
#Empat Bagian Sebuah Aturan
Sebuah aturan CSS terdiri dari selector, declaration block, property, dan value. Perhatikan contoh berikut:
h1 {
color: blue;
font-size: 28px;
}h1 adalah selector yang menargetkan elemen mana yang dihias. Di dalam kurung kurawal, color dan font-size adalah property, sedangkan blue dan 28px adalah value. Setiap pasangan property dan value dipisahkan titik dua dan diakhiri titik koma.
Selector bisa jauh lebih kompleks — kelas, id, atribut, hingga kombinasi antar elemen. Semua akan dibahas bertahap di episode 2. Untuk sekarang, ingat pola dasarnya: selector menentukan siapa, declaration menentukan apa yang diubah.
#Properti dan Nilai yang Valid
Tidak semua nama properti valid. Browser mengabaikan deklarasi yang salah ketik, jadi perhatikan penulisan. Nilai juga harus sesuai tipe propertinya: color menerima kata kunci seperti red, kode heksadesimal seperti #ff0000, atau fungsi seperti rgb(255, 0, 0). Episode 3 akan membedah properti teks dan warna secara mendalam.
#Tiga Cara Menyisipkan CSS
#Inline Style
Cara pertama: menulis properti langsung di atribut style sebuah elemen. Contohnya:
<p style="color: teal; font-weight: bold;">
Paragraf dengan inline style.
</p>Inline style bekerja dan cepat untuk eksperimen sekali pakai, tetapi tidak bisa dipakai ulang. Bayangkan 100 paragraf yang masing-masing butuh style yang sama — markup jadi berantakan dan sulit dirawat. Pakai inline hanya untuk pengujian cepat di DevTools atau saat menginjeksi gaya dari JavaScript.
#Internal Style
Cara kedua: menulis CSS di dalam tag style yang berada di bagian head dokumen HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Internal Style</title>
<style>
h1 {
color: navy;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf.</p>
</body>
</html>Internal style mengelompokkan semua aturan di satu tempat, tetapi hanya berlaku untuk satu halaman saja. Cocok untuk halaman yang benar-benar unik, namun duplikasi antar halaman tetap menjadi masalah.
#Eksternal Style
Cara ketiga, sekaligus standar industri: menyimpan CSS di file terpisah dan menghubungkannya dengan tag link:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Eksternal Style</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Judul</h1>
<p>Paragraf.</p>
</body>
</html>Isi file css/style.css dengan aturan yang sama seperti sebelumnya. Satu stylesheet bisa dipakai oleh banyak halaman sekaligus, sehingga perubahan cukup dilakukan sekali. Ini alasan utama tag link rel="stylesheet" selalu direkomendasikan.
#Memahami Cascading
#Apa Artinya Cascading
Kata cascading mengacu pada bagaimana browser menggabungkan semua sumber gaya — browser default, stylesheet eksternal, internal, inline, hingga gaya dari script — menjadi satu hasil akhir. Tidak semua deklarasi bertabrakan secara brutal; ada hierarki yang menentukan siapa yang menang.
Aturan utama: ketika dua aturan dengan kekuatan sama menargetkan elemen yang sama, aturan yang muncul paling akhir di sumber akan menang. Inilah mengapa urutan menulis file CSS sangat berpengaruh.
#Urutan Sumber Gaya
Dari yang paling lemah ke paling kuat:
- Gaya default browser (user agent stylesheet).
- Stylesheet eksternal dan internal, sesuai urutan penulisannya.
- Inline style pada atribut
style. - Deklarasi penting dengan
!important, dan aturan spesifisitas selector.
Spesifisitas adalah konsep kunci yang akan kalian dalami di episode 2. Untuk sekarang, cukup pahami bahwa inline style mengalahkan file eksternal, dan !important adalah pisau terakhir yang harus dipakai dengan sangat hati-hati.
#Mempraktikkan dengan Live Server
#Menjalankan Project
Gunakan project dari episode 0 sebagai basis. Pastikan server berjalan:
npx serve .Buka localhost:3000 di browser. Ubah-ubah nilai di css/style.css, lalu perhatikan bagaimana halaman berubah. Kalian juga bisa menguji perilaku cascading dengan menambahkan aturan duplikat dan melihat aturan terakhir yang menang.
#Eksperimen Inline vs Eksternal
Coba tambahkan inline style pada h1:
<h1 style="color: red;">Judul</h1>Perhatikan bahwa h1 kini berwarna merah meskipun css/style.css menyetel warna lain. Ini membuktikan hierarki cascading: inline style lebih kuat daripada stylesheet eksternal. Command npx serve . membantu kalian menguji skenario seperti ini tanpa konfigurasi server yang rumit.
#Kesalahan Umum dan Solusinya
#Stylesheet Tidak Termuat
Gejala paling umum: halaman tampil tanpa gaya sama sekali. Penyebabnya hampir selalu path href yang salah. Periksa letak file CSS relatif terhadap index.html — pada struktur kita, css/style.css berarti path css/style.css dari folder project. Buka DevTools dan cek tab Network untuk melihat apakah file CSS dimuat dengan status 200.
#Kurung Kurawal Tidak Seimbang
Satu kurung kurawal yang terlewat akan membuat seluruh aturan berikutnya ikut rusak. Gunakan format otomatis dari editor (misalnya Prettier) dan perhatikan indentasi dua spasi di dalam declaration block. Bila ragu, jalankan npx prettier --write css/style.css untuk merapikan file.
#Penutup
Inti yang harus dibawa pulang:
- CSS mengatur penampilan HTML, dan kata cascading merujuk pada cara browser menggabungkan sumber gaya.
- Satu aturan terdiri dari selector, property, dan value.
- Ada tiga cara menyisipkan CSS: inline, internal, dan eksternal.
- Eksternal adalah standar industri karena bisa dipakai ulang banyak halaman.
- Cascading memprioritaskan inline style di atas file eksternal, dan aturan terakhir menang bila kekuatannya sama.
- Verifikasi stylesheet yang gagal termuat lewat tab Network di DevTools.
Di episode 2 selanjutnya kita akan membahas selector dasar dan hirarki spesifisitas — jenis-jenis selector seperti class, id, dan atribut, bagaimana browser menghitung bobot spesifisitas, serta cara menulis aturan yang menang tanpa berantakan. Siapkan style.css kalian, karena latihan menulis selector akan segera dimulai!