Apa yang dilakukan CSS

Satu file CSS bisa mengubah gaya setiap halaman sebuah situs sekaligus. Itulah argumen utama untuk CSS ketika W3C menerbitkan CSS level 1 pada Desember 1996.

Struktur di HTML, tampilan di CSS

HTML menyatakan setiap bagian halaman itu apa: judul, daftar, formulir. CSS, singkatan dari Cascading Style Sheets, menyatakan bagaimana bagian-bagian itu terlihat: warna, fon, ukuran, jarak, dan posisinya di layar. Memisahkan keduanya punya manfaat nyata. Kamu bisa mengubah tampilan seluruh situs dengan menyunting satu stylesheet, HTML yang sama bisa tampil berbeda di ponsel, monitor besar, dan kertas, dan pembaca bisa menerapkan gaya mereka sendiri, misalnya teks yang lebih besar, tanpa merusak halaman.

Håkon Wium Lie mulai mengerjakan CSS di CERN pada Oktober 1994, Bert Bos bergabung pada 1995, dan W3C menerbitkan CSS level 1 sebagai Rekomendasi pada 17 Desember 1996. CSS 2 menyusul pada Mei 1998. Sejak itu CSS dipecah menjadi modul-modul, seperti Color, Selectors, Flexbox, dan Grid, yang masing-masing dikembangkan dengan kecepatannya sendiri oleh W3C CSS Working Group. Tidak ada satu CSS4; kelompok kerja itu menerbitkan snapshot yang mencantumkan modul mana saja yang sudah stabil.

Bentuk sebuah aturan

Stylesheet adalah daftar aturan. Setiap aturan diawali selektor, yang menyatakan elemen mana yang dikenai, diikuti blok deklarasi di dalam kurung kurawal. Di dalam blok, setiap deklarasi terdiri atas properti, titik dua, nilai, dan titik koma. Pada aturan di atas, h1 memilih setiap judul tingkat satu, dan dua deklarasinya membuat judul-judul itu berwarna biru dan setinggi 32 piksel. Spasi dan baris baru di dalam aturan tidak berpengaruh, jadi kebanyakan orang menaruh setiap deklarasi di barisnya sendiri agar mudah dibaca.

Saat browser menemukan deklarasi yang tidak dipahaminya, misalnya properti yang salah ketik atau nilai yang tidak masuk akal, browser melewati deklarasi itu saja dan melanjutkan ke deklarasi berikutnya. Ini disengaja: fitur CSS baru bisa ditambahkan tanpa merusak browser lama. Sisi buruknya, satu titik koma yang hilang bisa diam-diam menelan deklarasi sesudahnya, karena keduanya menyatu menjadi satu deklarasi yang tidak sah. Jika sebuah gaya tidak berlaku, periksa tanda bacanya lebih dulu. Komentar ditulis /* seperti ini */.

Tiga cara menambahkan CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Stylesheet eksternal, yang ditautkan dari <head> dengan <link rel="stylesheet">, adalah pilihan biasa untuk situs sungguhan: semua halaman memakainya bersama, dan browser mengunduhnya sekali lalu menyimpannya di cache. Elemen <style> memuat aturan untuk satu halaman, dan inilah yang dipakai latihan-latihan di kursus ini. Atribut style menerapkan deklarasi pada satu elemen; praktis untuk uji cepat tetapi sulit dirawat, karena tampilan yang sama harus diulang di setiap elemen.

Browser sudah punya gaya

Halaman tanpa CSS pun punya gaya: judul besar dan tebal, tautan biru dan bergaris bawah, daftar menjorok ke dalam. Gaya ini berasal dari stylesheet bawaan browser, yang disebut user agent stylesheet. Aturanmu diterapkan di atasnya. Itulah sebabnya halaman toko roti dari kursus HTML sudah bisa dibaca sebelum diberi CSS, dan mengapa stylesheet yang baik hanya mengubah yang perlu diubah.