Membuat template blogspot sendiri atau melakukan modifikasi pada template blogspot/blogger yang sudah ada sepertinya memang sudah menjadi kebutuhan tersendiri bagi para blogger lama yang masih menggunakan blogspot untuk ngeblog.

Untuk mempelajari lebih detil tentang template blogspot dan bisa menjadikan kamu secara tidak langsung sebagai "Master Blogspot (iya gitu?)" saya sudah posting tentang materi dasar yang harus diketahui di artikel: Menguasai Blogspot: Panduan Struktur dan Kode Template Blogspot

🧩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!