🧩Memahami Bagian Kode CSS

Catatan lengkap tentang struktur dasar CSS, aturan khusus, dan komentar — dirancang khusus sebagai referensi cepat yang tidak boleh terlupakan.

1. 5 Elemen Pokok dalam Sebuah Ruleset

Jika kita membedah sebuah aturan gaya ( ruleset ) CSS standar, terdapat 5 komponen utama yang selalu muncul. Berikut penjelasan mendetailnya:

① Selektor (Selector)

Berfungsi untuk menunjuk elemen HTML mana yang akan diberi gaya. Contoh: h1 (tag), .judul (class), #header (ID), atau kombinasi seperti div p.

② Blok Deklarasi (Declaration Block)

Adalah tanda kurung kurawal { ... } yang membungkus seluruh instruksi gaya. Semua properti dan nilai harus ditulis di antara kurung ini.

③ Properti (Property)

Aspek atau fitur dari elemen yang ingin diubah. Contoh: color, font-size, background, margin.

④ Nilai (Value)

Isi atau takaran yang diberikan kepada properti. Contoh: red, 16px, center, atau #ffffff.

⑤ Pemisah (Separator)

Ada dua jenis:

• Titik dua (:) — memisahkan Properti dan Nilai.
• Titik koma (;) — memisahkan satu deklarasi dengan deklarasi lainnya.

2. Visualisasi Lengkap dalam Kode

Perhatikan contoh di bawah ini. Setiap bagian telah diberi kode warna agar memudahkan identifikasi:

/* Contoh ruleset untuk elemen heading utama */
h1 {
  color: navy;
  font-size: 24px;
  text-align: center;
}

/* Contoh dengan class */
.kotak-biru {
  background: #3b82f6;
  padding: 1rem 2rem;
  border-radius: 8px;
}

3. Aturan Khusus: At-rule (diawali dengan @)

Selain ruleset biasa, CSS memiliki instruksi khusus yang disebut At-rule. Bagian ini bukanlah selektor biasa, melainkan statement yang mengatur perilaku CSS secara kondisional atau fungsional.

At-rule	Fungsi Utama
@media	Membuat desain responsif (menyesuaikan tampilan di HP, tablet, atau desktop).
@keyframes	Membuat animasi bergerak (frame-by-frame).
@import	Memanggil file CSS lain dari dalam file CSS saat ini.
@font-face	Mendaftarkan dan menggunakan font kustom (non-standar).

Contoh penggunaan @media di dalam kode:

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
  .menu {
    display: none;
  }
}

4. Komentar CSS (/* ... */)

Meskipun tidak dieksekusi oleh browser, komentar adalah bagian sangat penting dalam kode produksi maupun belajar. Fungsinya adalah:

• Memberi catatan atau penjelasan untuk diri sendiri atau tim.
• Menonaktifkan sementara bagian kode tertentu saat debugging.
• Membagi kode menjadi beberapa bagian (misal: “=== Header Styles ===”).

/* ========================================== */
/*  BAGIAN: TOMBOL UTAMA                     */
/* ========================================== */

.btn-primary {
  background: #2563eb;
  color: white;
}

/* Kode di bawah ini sementara dinonaktifkan */
/* .btn-primary:hover {
  background: red;
} */

💡 Ringkasan Cepat

Dengan memahami 5 elemen dasar, At-rule, dan komentar, Anda sudah menguasai 100% anatomi kode CSS. Sisanya adalah praktik dan eksplorasi properti!