Selamat datang di tutorial CSS kedua! Setelah memahami apa itu CSS dan mengapa itu penting, sekarang saatnya kita mendalami cara menulis kode CSS dengan benar. Memahami aturan penulisan atau sintaks adalah kunci agar browser dapat membaca dan menerapkan gaya yang Anda inginkan pada halaman web.

Anatomi Aturan CSS (CSS Rule)

Setiap kali Anda menulis CSS, Anda akan menulis sebuah aturan (rule). Ingat kembali, sebuah aturan CSS terdiri dari dua bagian utama: Selector (penyeleksi) dan Declaration Block (blok deklarasi).

/* Ini adalah contoh sebuah aturan CSS */
p {
  color: #333333;
  font-size: 16px;
}

Mari kita bedah setiap bagiannya:

• Selector (p): Bagian ini menargetkan elemen HTML mana yang ingin diberi gaya. Dalam contoh ini, kita menargetkan semua elemen paragraf (<p>).
• Declaration Block ({...}): Blok ini berisi satu atau lebih deklarasi gaya yang akan diterapkan pada selector. Blok ini diawali dengan kurung kurawal buka ({) dan diakhiri dengan kurung kurawal tutup (}).
• Declaration (color: #333333;): Ini adalah satu baris instruksi gaya yang terdiri dari Property dan Value.
  • Property (color): Atribut gaya yang ingin diubah (misalnya, warna, ukuran font, margin).
  • Value (#333333): Nilai dari properti tersebut.
• Pemisah: Perhatikan tanda baca yang digunakan:
  • Titik dua (:) memisahkan antara property dan value.
  • Titik koma (;) digunakan di akhir setiap deklarasi untuk memisahkannya dengan deklarasi berikutnya. Penting: Meskipun deklarasi terakhir di dalam blok tidak wajib diakhiri titik koma, sangat disarankan untuk tetap menambahkannya agar tidak lupa saat Anda menambahkan deklarasi baru.

Mengelompokkan Selector

Bagaimana jika Anda ingin menerapkan gaya yang sama persis ke beberapa elemen yang berbeda? Anda tidak perlu menulis aturan yang sama berulang kali. Cukup kelompokkan selector dengan memisahkannya menggunakan tanda koma (,).

Contoh:

/* Mengatur gaya yang sama untuk h1, h2, dan h3 */
h1, h2, h3 {
  font-family: 'Helvetica', sans-serif;
  color: navy;
}

Aturan di atas jauh lebih efisien daripada menulis tiga aturan terpisah untuk h1, h2, dan h3.

Memberi Komentar pada CSS

Sama seperti bahasa pemrograman lainnya, Anda bisa menambahkan komentar pada kode CSS Anda. Komentar tidak akan dibaca atau ditampilkan oleh browser, tetapi sangat berguna untuk meninggalkan catatan, menjelaskan fungsi kode, atau menonaktifkan sementara sebuah aturan tanpa menghapusnya.

Komentar di CSS diawali dengan /* dan diakhiri dengan */.

Contoh:

/* Ini adalah komentar multi-baris.
  Digunakan untuk mengatur gaya utama pada body.
*/
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Menonaktifkan sementara aturan di bawah ini */
/*
h1 {
  color: red;
}
*/

Sensitivitas Huruf (Case Sensitivity)

Secara umum, CSS tidak bersifat case-sensitive (tidak membedakan huruf besar dan kecil) untuk selector, property, dan value tertentu (seperti color: blue atau color: BLUE).

Namun, ada beberapa pengecualian penting:

• Nama Class dan ID: Jika Anda menggunakan selector . atau #, nilainya bersifat case-sensitive karena merujuk pada atribut class dan id di HTML yang juga case-sensitive. Jadi, .box berbeda dengan .Box.
• URL dan Font Family: Nama file gambar (url('image.jpg')) dan nama keluarga font (font-family: 'Georgia') harus ditulis persis sesuai dengan nama aslinya, termasuk besar kecilnya huruf.

Praktik Terbaik: Untuk menjaga konsistensi dan menghindari kesalahan, biasakan untuk selalu menulis semua kode CSS Anda dalam huruf kecil.

Kini Anda sudah menguasai aturan dasar penulisan CSS. Dengan fondasi ini, Anda siap untuk belajar lebih dalam tentang jenis-jenis selector yang lebih spesifik untuk menargetkan elemen dengan presisi. Sampai jumpa di tutorial selanjutnya!