CSS · Bab 1

Mengenal CSS

Memahami rule, selector, dan deklarasi CSS, tiga cara memasang CSS ke halaman, menulis komentar, serta memeriksa dan mencoba gaya langsung di panel Styles DevTools.

Halaman yang hanya berisi HTML, seperti katalog buku dan halaman kontak sebuah perpustakaan, tampil polos: huruf hitam, latar putih, semua tersusun ke bawah. CSS (Cascading Style Sheets) mengatur tampilan itu: warna, huruf, jarak, sampai tata letak. HTML tetap mengurus struktur dan makna, CSS mengurus rupa.

1.1 Anatomi Rule CSS

CSS terdiri atas kumpulan rule (aturan). Satu rule berbentuk seperti ini:

h1 {
  color: darkblue;
  font-size: 32px;
}

• h1 adalah selector: elemen mana yang diatur.
• Bagian di dalam kurung kurawal adalah blok deklarasi.
• color: darkblue; adalah satu deklarasi: properti color, titik dua, nilai darkblue, lalu titik koma.

Setiap deklarasi diakhiri titik koma. Satu rule boleh berisi banyak deklarasi.

Di playground, <style> ditulis bersama HTML supaya mudah dicoba. Di proyek nyata, CSS diletakkan di <head> atau di berkas terpisah, seperti dijelaskan di bagian berikut.

1.2 Tiga Cara Memasang CSS

1. Inline: atribut style langsung di elemen, misalnya <p style="color: red;">. Hanya berlaku untuk elemen itu, sulit dirawat, dan mengalahkan aturan biasa dari <style> atau berkas CSS. Hindari kecuali untuk percobaan cepat.
2. Internal: elemen <style> di dalam <head>. Berlaku untuk satu halaman.
3. Eksternal: berkas .css terpisah yang dipasang dengan <link rel="stylesheet"> di <head>. Inilah cara yang dianjurkan: satu berkas dipakai banyak halaman, dan browser dapat menyimpannya di cache sehingga halaman berikutnya lebih cepat dimuat.

<!-- index.html -->
<head>
  <meta charset="utf-8">
  <title>Perpustakaan Pelita</title>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css, di folder yang sama dengan index.html */
h1 {
  color: darkblue;
}

1.3 Komentar CSS

Komentar CSS hanya satu bentuk: dibuka /* dan ditutup */, boleh beberapa baris. Komentar dipakai untuk menjelaskan bagian kode atau menonaktifkan aturan sementara.

1.4 Browser Memaafkan Kesalahan

Browser tidak pernah menampilkan pesan galat (error) CSS di halaman. Deklarasi yang salah diabaikan begitu saja, dan deklarasi lain yang benar tetap berlaku.

Akibatnya, kesalahan CSS harus dicari sendiri. Alat utamanya adalah DevTools.

1.5 Panel Styles di DevTools

Klik kanan sebuah elemen, pilih Inspect, lalu lihat panel Styles di samping pohon elemen:

• Semua rule yang mengenai elemen itu tampil berurutan, beserta asal berkasnya.
• Deklarasi yang kalah oleh aturan lain tampil dicoret. Di Chrome, deklarasi yang tidak sah juga dicoret dan diberi ikon peringatan.
• Kotak centang di samping deklarasi menyalakan atau mematikannya.
• Nilai bisa diklik dan diubah langsung, termasuk menambah deklarasi baru. Perubahan ini sementara dan hilang saat halaman dimuat ulang. Bila hasilnya cocok, salin ke berkas CSS-mu.
• Tab Computed menampilkan nilai akhir setiap properti setelah semua aturan diperhitungkan.

Coba sekarang: jalankan playground di bagian 1.4, klik kanan paragrafnya di hasil, lalu Inspect. Kamu akan melihat colr dan color: merah dicoret.

1.6 Ringkasan

• Rule CSS = selector + blok deklarasi. Deklarasi = properti, titik dua, nilai, titik koma.
• Tiga cara memasang CSS: inline (atribut style), internal (<style>), dan eksternal (<link rel="stylesheet">). Pilih eksternal untuk proyek.
• Komentar CSS hanya /* … */.
• Kesalahan CSS diabaikan tanpa pesan. Temukan dengan panel Styles dan Computed di DevTools.