Hari 4: CSS Syntax – Belajar CSS From Zero to Hero

by

Pahami struktur dasar CSS syntax: selector, property, dan value. Lengkap dengan contoh kode, studi kasus, dan latihan praktis untuk pemula.

CSS Syntax – Belajar CSS From Zero to Hero

Apa Itu CSS Syntax?

CSS (Cascading Style Sheets) bekerja dengan aturan yang disebut syntax. Syntax CSS menentukan bagaimana kita memberi gaya pada elemen HTML.
Secara umum, syntax CSS ditulis dalam format berikut:

selector {
  property: value;
}
  • Selector → elemen HTML yang akan diatur.
  • Property → atribut yang ingin diubah.
  • Value → nilai dari property tersebut.

Contoh sederhana:

p {
  color: red;
  font-size: 16px;
}

Artinya: semua paragraf (<p>) akan memiliki teks berwarna merah dengan ukuran font 16 piksel.

Bagian-Bagian CSS Syntax

1. Selector

Selector adalah “target” elemen HTML. Beberapa contoh selector dasar:

  • Tag selector → p { ... }
  • Class selector → .judul { ... }
  • ID selector → #header { ... }

2. Property

Property adalah atribut tampilan yang ingin diubah. Contoh property umum:

  • color
  • font-size
  • background-color
  • margin
  • padding

3. Value

Value adalah nilai dari property. Contoh:

  • color: blue;
  • font-size: 20px;
  • background-color: #f2f2f2;

4. Declaration

Satu property: value; disebut declaration.
Contoh: color: red;

5. Declaration Block

Kumpulan declaration yang ditulis dalam kurung kurawal { ... }.
Contoh:

h1 {
  color: blue;
  text-align: center;
}

Contoh Studi Kasus: Styling Artikel Blog

HTML tanpa CSS:

<h1>Belajar CSS Syntax</h1>
<p>Hari ini kita belajar selector, property, dan value.</p>

CSS untuk mempercantik:

h1 {
  color: #0066cc;
  font-size: 28px;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}

Hasil: Judul tampil besar di tengah dengan warna biru, sementara paragraf lebih rapi dan mudah dibaca.

Kesalahan Umum Pemula Saat Menulis CSS Syntax

  1. Lupa titik koma (;)
    Salah:
p {
  color: red
  font-size: 18px
}

Benar:

p {
  color: red;
  font-size: 18px;
}
  1. Menggunakan selector yang salah
    Salah: judul { color: blue; } (HTML tidak punya tag <judul>).
    Benar: .judul { color: blue; } jika di HTML ditulis <h1 class="judul">.
  2. Lupa kurung kurawal
    Salah:
h1
  color: green;

Benar:

h1 {
  color: green;
}

Tips Menulis CSS Syntax dengan Rapi

  • Selalu gunakan indentasi agar mudah dibaca.
  • Gunakan komentar untuk memberi catatan:
/* Styling untuk navbar */
nav {
  background: black;
}
  • Gunakan konsistensi penulisan (huruf kecil untuk property, spasi rapi).
  • Simpan file dengan ekstensi .css.

Latihan Praktis Hari 4

Buat file HTML sederhana dengan judul dan paragraf. Lalu tambahkan CSS:

  1. Ubah warna judul menjadi biru.
  2. Atur paragraf agar memiliki font-size: 18px dan line-height: 1.5.
  3. Tambahkan background berwarna terang pada body.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kamu sudah mempelajari CSS Syntax: selector, property, dan value. Pada hari berikutnya, kita akan membahas CSS Selector Dasar untuk memilih elemen dengan tepat.
👉 Lanjut ke Hari 5: CSS Selector Dasar

Kesimpulan

  • CSS Syntax terdiri dari selector, property, dan value.
  • Selector = target, property = atribut, value = nilai.
  • Declaration ditulis dalam { } dengan pemisah titik koma.
  • Syntax yang rapi akan memudahkan pengelolaan CSS.

💡 Tantangan Hari 4:
Buatlah halaman HTML dengan minimal satu judul dan dua paragraf. Tambahkan CSS dengan selector berbeda untuk mengubah warna, ukuran font, dan tata letak. Bagikan hasil karyamu di GitHub atau media sosial dengan hashtag #BelajarCSS.

Leave a Comment