CSS adalah: Pengertian, Fungsi, dan Contoh — CSS

CSS adalah bahasa yang mengatur tampilan visual halaman web — warna, tata letak, dan tipografi. Mulai dari nol dengan contoh dan playground gratis.

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan visual halaman web. Kalau HTML adalah kerangka rumah (tembok, pintu, jendela), maka CSS adalah cat, wallpaper, dan dekorasinya. Tanpa CSS, semua website hanya berupa teks hitam di latar putih.

Anatomi CSS

Setiap aturan CSS terdiri dari 3 bagian:

h1 {
  color: blue;
  font-size: 24px;
}

Selektor (h1) — elemen HTML mana yang ingin di-style
Properti (color, font-size) — apa yang ingin diubah
Nilai (blue, 24px) — bagaimana perubahannya

Satu blok { } bisa berisi banyak properti.

3 Cara Menggunakan CSS

1. Inline CSS

Langsung di atribut style pada tag HTML:

<h1 style="color: blue;">Judul Biru</h1>

✗ Susah dikelola di proyek besar karena style tersebar di mana-mana.

2. Internal CSS

Di dalam tag <style> di <head>:

<head>
  <style>
    h1 { color: blue; }
  </style>
</head>

✓ Cocok untuk halaman tunggal. Style terpusat dalam satu file.

3. External CSS

Di file .css terpisah, dihubungkan dengan <link>:

<head>
  <link rel="stylesheet" href="style.css">
</head>

✓ Cara terbaik untuk proyek nyata — HTML dan CSS terpisah, style bisa dipakai di banyak halaman.

💡 Pada latihan ini kamu akan mencoba Inline CSS dan Internal CSS agar terbiasa membedakan keduanya.

🎭 Analogi sehari-hari

CSS = cat dan dekorasi rumah. HTML kasih kerangka (tembok, jendela). CSS kasih warna, wallpaper, posisi furniture. Tanpa CSS, rumahnya cuma struktur beton — fungsional tapi kosong jelek.

⚠️ Jebakan yang sering ditemui

Inline style="..." everywhere = sulit refactor + duplikasi. Pakai class.
External CSS adalah BEST practice untuk proyek nyata — satu file, dipakai banyak halaman, browser cache.
Lupa <link rel="stylesheet"> atau path salah = halaman tampil tanpa style (terlihat 1995). Cek Network tab.
CSS case-sensitive untuk SELECTOR (.Header ≠ .header) tapi case-insensitive untuk PROPERTY (color = COLOR). Konvensi: kebab-case untuk class.
Specificity bisa bikin override gagal — #id menang dari .class menang dari tag. Akan dibahas lesson Specificity.

🤔 Coba pikir. Kenapa CSS pake sistem cascade (banyak rule + pemenang dipilih berdasar specificity), bukan sekadar override langsung kayak inline style? Jawabnya: cascade bikin styling modular. Tim bisa nulis CSS terpisah-pisah (reset.css, theme.css, components.css) tanpa khawatir saling tabrakan — tiap rule jelas urutan kemenangannya. Bayangin kalau tiap CSS rule langsung override semua yang ada — gak ada cara reuse style atau theming. Cascade = backbone CSS yang bikin dia scalable.

TL;DR: CSS = bahasa styling visual web (cat dan dekorasi rumah). Anatomi: selector + properti + nilai dalam blok { }. 3 cara pakai: inline (di style="...", susah maintain), internal (<style> di <head>, OK untuk single page), external (file .css terpisah, best practice — modular + cacheable). External CSS = standard untuk proyek nyata.