CSS 01: Mengenal CSS dan Menulis Aturan Pertama

HTML menyusun konten, sedangkan CSS mengatur tampilannya. Dengan CSS, kita dapat menentukan warna, ukuran, jarak, dan layout tanpa mengubah makna HTML.

Tujuan Belajar

• Memahami bentuk sebuah aturan CSS.
• Menulis internal CSS di dalam dokumen HTML.
• Mengenal external dan inline CSS.
• Mendeteksi kesalahan sintaks sederhana.

1. Anatomi Aturan CSS

Contoh berikut sudah berisi HTML dan internal CSS. Jalankan, kemudian ubah warna atau ukuran judul untuk melihat hasilnya.

Cara membaca aturan h1:

• h1 adalah selector, yaitu elemen yang dipilih.
• color dan font-size adalah property.
• #0f766e dan 32px adalah value.
• Satu pasangan property dan value disebut deklarasi.

Kurung kurawal membungkus deklarasi. Tanda titik dua memisahkan property dari value, sedangkan titik koma mengakhiri deklarasi.

2. Internal CSS

Internal CSS ditulis di dalam elemen <style>, biasanya di dalam <head>. Semua contoh interaktif pada seri CSS ini menggunakan cara tersebut agar HTML dan CSS dapat dicoba dalam satu tab sandbox.

Cara ini cocok untuk belajar dan bereksperimen pada satu halaman. Pada website besar, CSS biasanya dipindahkan ke file terpisah agar dapat digunakan oleh banyak halaman.

3. External dan Inline CSS

External CSS dihubungkan dengan <link rel="stylesheet" href="styles.css">. Ini merupakan pilihan utama untuk project sungguhan karena satu file CSS dapat dipakai ulang.

Inline CSS ditulis langsung pada elemen, misalnya <p style="color: tomato;">Pesan penting</p>. Cara ini sulit digunakan ulang dan membuat HTML cepat berantakan, sehingga sebaiknya hanya dipakai untuk kebutuhan khusus.

4. Komentar CSS

Komentar dapat ditulis di dalam internal CSS.

Komentar menjelaskan alasan atau kelompok aturan. Jangan menulis komentar yang sekadar mengulang kode.

Cara Memeriksa CSS yang Tidak Bekerja

1. Pastikan selector cocok dengan elemen HTML.
2. Periksa ejaan property dan value.
3. Pastikan <style> berada di dalam <head>.
4. Pastikan kurung kurawal serta titik koma lengkap.
5. Periksa apakah aturan lain menimpa aturan Anda.

Latihan

Jalankan contoh pertama. Ubah warna latar, ukuran judul, dan jarak pada body. Tambahkan satu tombol, lalu buat aturan CSS agar tombol memiliki warna latar dan padding.

Rangkuman

Aturan CSS terdiri dari selector dan deklarasi. Internal CSS memudahkan eksperimen karena HTML dan CSS berada dalam satu dokumen. Untuk project nyata yang memiliki banyak halaman, external stylesheet tetap lebih mudah dirawat.