Pengenalan CSS: Memberi Warna pada Web

HTML itu fondasi, tapi tanpa CSS, website Anda bakal terlihat seperti dokumen Word tahun 90-an — teks hitam putih tanpa warna, tanpa layout, tanpa jiwa.

CSS hadir untuk menyelesaikan masalah itu. Cascading Style Sheets — bahasa yang menentukan bagaimana elemen HTML ditampilkan di layar.

Di artikel ini, kita akan bahas dari nol: apa itu CSS, cara kerjanya, tiga cara menerapkan CSS di halaman, selector dasar, dan property yang sering dipakai.

1. CSS Itu Apa?

CSS kepanjangan dari Cascading Style Sheets. Kalau HTML itu kerangka atau struktur, CSS itu cat, wallpaper, dan furnitur yang bikin rumah terlihat menarik.

Tanpa CSS:

<h1>Judul Artikel</h1>
<p>Ini paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

Hasilnya? Semua teks berwarna hitam, ukuran default, bertumpuk di pojok kiri atas. Tidak ada jarak, tidak ada warna, tidak ada gaya sama sekali.

Dengan CSS:

h1 {
  color: #2563eb;
  font-size: 2rem;
}

p {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 1rem;
}

Sekarang heading berwarna biru, paragraf punya jarak antarbaris yang nyaman, dan ada spasi antar paragraf. Beda banget kan?

Point penting: CSS tidak mengubah isi HTML — CSS cuma mengubah tampilannya. Struktur dan konten tetap sama, yang berubah cuma cara presentasinya.

2. Cara Kerja CSS

CSS bekerja dengan cara memilih elemen HTML, lalu memberikan style ke elemen itu. Polanya sederhana:

selector { property: value; }

Contoh konkret:

h1 {
  color: blue;
}

Di sini:

h1 adalah selector — elemen HTML yang mau distyle
color adalah property — aspek yang mau diubah
blue adalah value — nilai yang diberikan

Jadi CSS itu semacam instruksi: “Cari semua elemen <h1>, warnain teksnya biru.”

Kalau ada banyak elemen <h1> di halaman, semua elemen itu bakal dikasih style yang sama. Itulah kenapa CSS efektif — Anda cukup tulis sekali, dan berlaku untuk semua elemen yang cocok.

3. Tiga Cara Menerapkan CSS

Ada tiga cara nge-apply CSS ke halaman HTML. Masing-masing punya kelebihan dan kekurangan.

3.1 Inline CSS

Ditulis langsung di tag HTML menggunakan atribut style.

<h1 style="color: blue; font-size: 2rem;">Judul Biru</h1>
<p style="color: gray; font-size: 1rem;">Paragraf abu-abu.</p>

Kelebihan:

Cepat buat test sekali pakai
Prioritas tertinggi — override semua selector lain

Kekurangan:

Bikin kode berantakan
Harus ulangin di setiap elemen — tidak reusable
Percuma kalau punya ratusan elemen

Kapan pakai: Hampir tidak pernah. Inline CSS hanya berguna untuk debug atau prototype super cepat.

3.2 Internal CSS (Style Block)

Ditulis di dalam tag <style> di bagian <head> HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      font-size: 2rem;
    }
    p {
      color: #374151;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Judul Biru</h1>
  <p>Paragraf abu-abu.</p>
</body>
</html>

Kelebihan:

Lebih rapi dari inline
Bisa style banyak elemen sekaligus
Semua style ada di satu tempat

Kekurangan:

Tetap di satu file — kalau mau apply ke halaman lain, harus copy-paste lagi
Bikin HTML file jadi gede kalau CSS-nya banyak

Kapan pakai: Satu halaman khusus yang butuh gaya unik — misal halaman presentasi atau halaman error 404.

3.3 External CSS (Recommended)

Ditulis di file terpisah (.css), lalu di-link dari HTML.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Judul Biru</h1>
  <p>Paragraf abu-abu.</p>
</body>
</html>

File style.css:

h1 {
  color: blue;
  font-size: 2rem;
}

p {
  color: #374151;
  line-height: 1.6;
}

Kelebihan:

Pisah concerns — HTML fokus struktur, CSS fokus tampilan
Reusable — satu file CSS bisa dipake di banyak halaman
Lebih mudah di-maintain
Browser cache CSS file, jadi load lebih cepat di kunjungan berikutnya

Kekurangan:

Butuh file tambahan
Harus link di setiap HTML

Kapan pakai: Hampir selalu. External CSS adalah standar di web development profesional.

Perbandingan

Metode	Reusable	Prioritas	Best Practice
Inline	❌	Tertinggi	Hindari
Internal	❌	Sedang	Untuk satu halaman
External	✅	Paling rendah	Selalu pakai ini

4. Selector Dasar

Selector menentukan elemen mana yang mau distyle. Ada tiga jenis selector yang harus Anda kuasai dulu.

4.1 Element Selector

Memilih berdasarkan nama tag HTML. Affect semua elemen dengan tag yang sama.

p {
  color: #374151;
  font-size: 1rem;
}

h1 {
  color: #2563eb;
}

Semua <p> di halaman bakal punya style ini. Semua <h1> juga. Tidak ada pengecualian.

4.2 Class Selector

Ditandai dengan titik (.) di depan nama class. Cocok buat style yang dipakai di beberapa elemen tapi bukan semua.

<p class="highlight">Paragraf ini di-highlight.</p>
<p>Paragraf biasa.</p>
<p class="highlight">Paragraf ini juga di-highlight.</p>

.highlight {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 1rem;
}

Hanya elemen dengan class highlight yang kena style ini. Elemen tanpa class itu tetap default.

Tips: Class selector paling sering dipake dalam CSS. Gunakan class kalau ada beberapa elemen yang butuh style yang sama tapi bukan semuanya.

4.3 ID Selector

Ditandai dengan hash (#) di depan nama ID. Hanya boleh dipakai satu kali di satu halaman.

<div id="hero">
  <h1>Selamat Datang!</h1>
  <p>Berbicara tentang CSS.</p>
</div>

#hero {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
}

ID selector khusus buat elemen yang cuma muncul sekali — misal header utama, footer, atau sidebar.

Catatan penting: Banyak developer lebih suka pakai class daripada ID karena lebih fleksibel. Class bisa dipakai berkali-kali, ID tidak. Di proyek besar, banyak yang hindari ID selector sama sekali.

5. Property Dasar CSS

Berikut property yang paling sering dipake di awal belajar CSS:

Warna dan Background

p {
  color: #374151;           /* Warna teks */
  background-color: white;  /* Warna background */
}

Anda bisa pakai berbagai format warna:

color: red;                 /* Nama warna */
color: #ff0000;             /* Hex */
color: rgb(255, 0, 0);      /* RGB */
color: hsl(0, 100%, 50%);   /* HSL */

Typography

h1 {
  font-family: 'Inter', sans-serif;  /* Jenis font */
  font-size: 2rem;                   /* Ukuran font */
  font-weight: 700;                  /* Ketebalan */
  text-align: center;                /* Align: left, center, right */
}

Spacing

p {
  margin: 1rem 0;         /* Luar: atas-kanan-bawah-kiri */
  padding: 0.5rem 1rem;   /* Dalam: atas-kanan-bawah-kiri */
}

Analogi: margin itu jarak antar elemen (luar kotak). padding itu jarak antara isi dan tepi kotak (dalam kotak).

/* Shorthand */
margin: 1rem;              /* Semua sisi sama */
margin: 1rem 2rem;         /* Atas-bawah, kiri-kanan */
margin: 1rem 2rem 1rem 0;  /* Atas, kanan, bawah, kiri */

Ukuran dan Lebar

.container {
  width: 80%;             /* Persentase dari parent */
  max-width: 1200px;      /* Maksimum lebar */
  height: auto;           /* Menyesuaikan konten */
}

Border

.card {
  border: 1px solid #e5e7eb;    /* Ketebalan, gaya, warna */
  border-radius: 8px;           /* Sudut membulat */
}

6. Urutan Prioritas CSS

Kalau ada dua selector yang sama-sama menarget elemen yang sama, mana yang menang? Ada aturannya:

Inline CSS — selalu menang
ID Selector (#id) — prioritas tinggi
Class Selector (.class) — prioritas sedang
Element Selector (p, h1) — prioritas rendah

p { color: black; }         /* Prioritas rendah */
p.highlight { color: blue; } /* Prioritas lebih tinggi (ada class) */
#intro { color: red; }       /* Prioritas tinggi (pakai ID) */

Kalau elemen <p> punya class highlight DAN id intro, warna yang tampil adalah red karena ID selector punya prioritas paling tinggi.

Tips praktis: Kalau sering pakai !important untuk override, berarti ada masalah di struktur CSS Anda. Hindari !important sebisa mungkin — susah di-maintain.

Recap

Konsep	Penjelasan Singkat
CSS	Cascading Style Sheets — mengatur tampilan HTML
Inline CSS	Ditulis langsung di tag HTML (`style="..."`)
Internal CSS	Ditulis di `<style>` dalam `<head>`
External CSS	File `.css` terpisah, di-link dengan `<link>`
Element Selector	Pilih berdasarkan tag (`p`, `h1`)
Class Selector	Pilih berdasarkan class (`.highlight`)
ID Selector	Pilih berdasarkan ID (`#hero`)
`color`	Warna teks
`background-color`	Warna latar belakang
`margin`	Jarak luar elemen
`padding`	Jarak dalam elemen
Prioritas	Inline > ID > Class > Element

Penutup

CSS adalah jembatan antara struktur HTML dan tampilan yang menarik. Tanpa CSS, website hanya sekumpulan teks tanpa gaya. Dengan CSS, Anda bisa mengontrol warna, font, layout, spacing — hampir semua aspek visual.

Yang terpenting: pakai external CSS selalu. Mulai dari sekarang, biasakan untuk memisahkan HTML dan CSS ke file yang berbeda.

Di artikel selanjutnya, kita akan bahas Selector & Properties lebih dalam — combinators, pseudo-classes, dan property CSS yang lebih advance.

Pengenalan CSS: Memberi Warna pada Web

1. CSS Itu Apa?

2. Cara Kerja CSS

3. Tiga Cara Menerapkan CSS

3.1 Inline CSS

3.2 Internal CSS (Style Block)

3.3 External CSS (Recommended)

Perbandingan

4. Selector Dasar

4.1 Element Selector

4.2 Class Selector

4.3 ID Selector

5. Property Dasar CSS

Warna dan Background

Typography

Spacing

Ukuran dan Lebar

Border

6. Urutan Prioritas CSS

Recap

Penutup

Daftar Isi