Belajar Menulis Syntax CSS yang Benar untuk Pemula

— Panduan Santai Tapi Serius buat yang Baru Kenal CSS —

Kalau kamu baca ini, kemungkinan besar kamu baru mulai main-main dengan CSS atau mungkin udah coba nulis tapi malah jadi *“kenapa gak muncul-muncul sih?!”*. Tenang aja, semua developer pernah lewat fase “ngomel-ngomel ke layar” karena lupa titik koma.

CSS itu kayak bumbu dapur: kalau takarannya pas dan cara masaknya benar, hasilnya enak banget dilihat. Tapi kalau salah dikit aja… eh, kok tombolnya jadi segede rumah?

Di bab ini, Aku bakal ajak kamu jalan-jalan santai mengenal syntax CSS yang benar, dari dasar banget sampe tips biar kode kamu nggak bikin pusing sendiri besok hari. Siapkan kopi (atau teh tarik), dan mari kita mulai.

Apa Itu CSS Syntax?

Pengertian CSS Syntax Secara Umum

CSS (Cascading Style Sheets) punya aturan penulisan yang disebut syntax semacam tata bahasa buat ngasih tahu browser: “Hei, tolong ubah warna teks ini jadi ungu!” atau “Bikin margin-nya lega dikit, dong!”

Syntax CSS itu terdiri dari selector, property, dan value, yang disusun dengan format tertentu. Kalau kamu bayangkan CSS itu kayak resep masakan, maka syntax-nya adalah cara menulis resep itu biar orang lain ngerti: “1 sdt garam, campur rata, panggang 30 menit.”

Kenapa CSS Punya Aturan Penulisan Sendiri

Bayangkan kalau setiap developer boleh nulis CSS seenaknya:

“warna: merah; ukuran font: gede banget;”

Browser mana yang mau nurut?

Aturan penulisan CSS dibuat supaya semua browser bisa membaca dan menafsirkan kode dengan cara yang sama. Ini penting banget biar website kamu tampil konsisten di Chrome, Firefox, Safari, bahkan di browser zaman batu (kayak IE… eh, skip aja deh).

Struktur Dasar CSS

CSS itu kayak surat cinta buat elemen HTML. Suratnya selalu punya format:

CSS

selector {
  property: value;
}

selector {
  property: value;
}

Mari kita bedah satu per satu.

Selector dalam CSS

Selector itu “nama panggilan” buat elemen HTML yang mau kamu ubah tampilannya. Contohnya:

p → semua paragraf
.judul → elemen dengan class judul
#header → elemen dengan ID header

Jadi selector itu kayak alamat surat: pastikan kamu ngirim ke orang yang tepat!

Property dalam CSS

Property itu apa yang mau kamu ubah. Misalnya:

color → warna teks
font-size → ukuran huruf
margin → jarak luar elemen

Ada ratusan property, tapi tenang — kamu nggak perlu hafal semua. Cukup yang sering dipakai aja dulu.

Value dalam CSS

Value itu nilai dari perubahan yang kamu minta. Contoh:

color: blue; → nilai "blue"
font-size: 16px; → nilai "16px"

Value harus sesuai tipe datanya: angka butuh satuan (px, em, %), warna bisa pakai nama (red), kode hex (#ff0000), atau RGB.

Bentuk Umum Penulisan CSS

Contoh Penulisan CSS yang Benar

CSS

h1 {
  color: purple;
}

h1 {
  color: purple;
}

Ini artinya: “Semua elemen <h1> di halaman, ubah warna teksnya jadi ungu.”

Perhatikan:

Ada kurung kurawal {}
Di dalamnya ada property: value
Diakhiri titik koma ;

Contoh CSS dengan Banyak Property

CSS

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

Setiap property ditulis di baris terpisah (biar rapi!), dan semua diakhiri titik koma termasuk yang paling akhir. Iya, yang terakhir juga! (Meski kadang browser masih maklum, tapi jangan coba-coba ya, Bos.)

Cara Membaca CSS dari Kiri ke Kanan

Peran Selector dalam Menentukan Elemen

CSS dibaca dari kiri ke kanan oleh browser. Jadi saat kamu nulis:

CSS

nav ul li a {
  color: gold;
}

nav ul li a {
  color: gold;
}

Browser mikir:
“Cari semua <a> → yang ada di dalam <li> → yang ada di dalam <ul> → yang ada di dalam <nav>.”

Kalau strukturnya nggak nyambung, ya nggak bakal kebaca. Jadi pastikan HTML-mu rapi juga!

Cara Browser Memahami Property dan Value

Browser itu kayak asisten super cepat: dia baca semua CSS, cocokin sama elemen HTML, lalu render sesuai aturan. Tapi kalau syntax-nya salah (misal lupa titik koma atau typo), dia cuma diam… dan gaya kamu nggak muncul. Ngeselin, kan?

CSS Declaration dan Declaration Block

Apa Itu CSS Declaration

Declaration itu satu pasang property + value, contoh:

CSS

color: red;

color: red;

Itu satu declaration. Simple, kan?

Fungsi Declaration Block dalam CSS

Declaration block adalah kumpulan declaration yang dibungkus dalam kurung kurawal {}. Contoh:

CSS

p {
  color: black;
  font-size: 14px;
  line-height: 1.5;
}

p {
  color: black;
  font-size: 14px;
  line-height: 1.5;
}

Block ini mengelompokkan semua gaya yang berlaku untuk satu selector. Tanpa block ini, CSS bakal kacau kayak mie instan tanpa kuah.

Kesalahan Umum dalam Menulis CSS Syntax

Lupa Titik Koma (;)

Ini kesalahan nomor 1 sepanjang masa. Contoh salah:

CSS

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

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

Baris color: red nggak ada titik komanya → browser bingung, dan seluruh block bisa gagal. Selalu akhiri tiap declaration dengan ;!

Salah Menulis Property atau Value

Misal nulis colour (ala Inggris) padahal harus color. Atau bg-color — padahal property-nya background-color. Browser nggak ngerti bahasa kreatif, jadi pastikan ejaanmu sesuai dokumentasi resmi.

Selector Tidak Sesuai Elemen HTML

Kamu nulis .header, tapi di HTML-nya pakai <div id="header">. Ya jelas nggak nyambung! Pastikan class dan ID di CSS sama persis dengan yang di HTML.

Tips Menulis CSS Supaya Rapi dan Mudah Dibaca

Gunakan Indentasi yang Konsisten

Indentasi bikin kode kamu enak dilihat, apalagi pas debugging. Contoh bagus:

CSS

.card {
  padding: 16px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card {
  padding: 16px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Bukan:

CSS

.card{
padding:16px;background:white;box-shadow:0 2px 8px rgba(0,0,0,0.1);}

.card{
padding:16px;background:white;box-shadow:0 2px 8px rgba(0,0,0,0.1);}

Yang kedua bikin mata perih dan hati miris.

Pisahkan Setiap Property ke Baris Baru

Satu baris = satu property. Ini bikin kamu gampang cari kesalahan, tambah properti baru, atau hapus yang nggak perlu. Plus, tim kamu (atau dirimu sendiri 3 bulan lagi) bakal berterima kasih.

Bonus: Praktik Langsung Coba Sendiri di Browser!

Jangan cuma baca tapi coba langsung! Buka browser, klik kanan → Inspect Element → tab Styles, lalu ketik CSS mu di situ. Kamu bisa lihat efeknya langsung real time!

Contoh tantangan:

Ubah warna latar belakang body jadi biru muda, dan buat semua heading (h1, h2) jadi tebal dan berwarna putih.

Kalau berhasil, selamat! Kamu resmi lulus dari “kelas CSS Syntax 101”.

Gimana, udah mulai kenal lebih dekat sama syntax CSS? Ingat: semua master pernah jadi pemula, dan semua kode rapi lahir dari kebiasaan menulis bersih sejak awal.

Kalau kamu mentok, typo, atau tiba-tiba layout nya ngaco jangan panik. Ambil napas, cek titik koma, pastikan selector nya bener, lalu coba lagi.

Sampai jumpa di Bab 03: Selector CSS – Senjata Rahasia Styling Web

Bab 02: Cara Menulis Syntax CSS yang Benar untuk Pemula