Belajar CSS - Properti Teks, Warna, dan Latar Belakang

#Pendahuluan

Setelah menguasai selector di episode 2, kalian kini punya alat untuk memilih elemen. Episode 3 membahas apa yang dilakukan terhadap elemen tersebut: mengubah penampilan teks, warna, dan latar belakang. Ini adalah properti yang paling banyak dipakai dalam styling sehari-hari.

Teks adalah elemen terpenting di hampir semua halaman web, jadi pemahaman tipografi yang baik langsung terlihat hasilnya. Warna menentukan identitas dan emosi sebuah brand, sedangkan latar belakang memberi kedalaman visual. Ketiganya adalah paket yang tidak terpisahkan.

Episode ini memperkenalkan model warna dasar — kata kunci, heksadesimal, dan fungsi rgb(). Episode 6 akan menggali model warna modern secara mendalam. Untuk sekarang, fokus pada properti yang paling berdampak.

#Properti Teks

#Keluarga Font

font-family menentukan jenis huruf yang dipakai:

font.css

body {
  font-family: system-ui, -apple-system, sans-serif;
}
 
h1 {
  font-family: Georgia, "Times New Roman", serif;
}

Nilai berisi daftar yang dipisahkan koma. Browser mencoba dari kiri; bila font pertama tidak tersedia, ia beralih ke berikutnya. Nilai terakhir sebaiknya berupa kategori generik seperti serif atau sans-serif sebagai jaring pengaman.

#Ukuran, Berat, dan Tinggi Baris

ukuran.css

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
 
strong {
  font-weight: 700;
}

font-size menentukan besar huruf, font-weight mengontrol ketebalan (100-900), dan line-height mengatur jarak antar baris. Nilai line-height tanpa satuan seperti 1.6 relatif terhadap ukuran font dan merupakan praktik yang disarankan.

#Perataan, Dekorasi, dan Transformasi Teks

perataan.css

.center { text-align: center; }
.link { text-decoration: none; }
.uppercase { text-transform: uppercase; }

text-align mengatur perataan horizontal, text-decoration mengatur garis bawah atau coret, dan text-transform mengubah huruf besar-kecil tanpa mengubah markup. Kombinasi text-transform: uppercase dengan letter-spacing menciptakan kesan modern pada tombol.

#Warna Teks

#Kata Kunci dan Heksadesimal

CSS mendukung kata kunci warna seperti red atau white. Untuk kontrol lebih presisi, pakai notasi heksadesimal:

warna.css

.primary { color: #2563eb; }
.secondary { color: #f59e0b; }
.muted { color: #6b7280; }

Notasi #2563eb terdiri dari tiga pasang digit heksadesimal untuk merah, hijau, dan biru. Nilai berulang bisa disingkat: #fff sama dengan #ffffff. Pilih palet yang konsisten sejak awal agar desain terasa utuh.

#Fungsi rgb() dan hsl()

rgb-hsl.css

.merah { color: rgb(239, 68, 68); }
.biru { color: hsl(217, 91%, 60%); }
.transparan { color: rgba(0, 0, 0, 0.6); }

rgb(239, 68, 68) menyusun warna dari intensitas merah, hijau, dan biru (0-255). hsl(hue, saturation, lightness) lebih intuitif untuk menyesuaikan kecerahan. Komponen alpha keempat seperti rgba(0, 0, 0, 0.6) menambahkan transparansi.

#Latar Belakang

#Warna dan Gambar Latar

background-color mengisi area di belakang konten, sedangkan background-image menempatkan gambar:

bg.css

.header {
  background-color: #0f172a;
  color: white;
  padding: 16px;
}
 
.hero {
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
}

background-size: cover memastikan gambar menutupi seluruh area tanpa distorsi, background-position menentukan titik fokus, dan background-repeat mengontrol penggandaan gambar. Ini pola standar untuk header hero.

#Shorthand Background

Semua properti latar bisa digabung dalam satu deklarasi:

bg-shorthand.css

.hero {
  background: url("images/hero.jpg") center/cover no-repeat #0f172a;
}

Urutan shorthand memakai pola color image position/size repeat. Nilai center/cover menetapkan posisi dan ukuran sekaligus. Shorthand lebih ringkas, namun pahami properti individualnya agar tidak bingung saat meng-override.

#Latihan Terpadu

Gabungkan semua materi dalam satu kartu, dengan markup sederhana <div class="card"> yang berisi judul dan paragraf:

css/style.css

body {
  font-family: system-ui, sans-serif;
  background-color: #f1f5f9;
  margin: 0;
  padding: 32px;
}
 
.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 320px;
}
 
.card h2 {
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 1px;
}
 
.card p {
  color: #475569;
  line-height: 1.6;
}

Jalankan npx serve . lalu buka localhost:3000 untuk melihat hasilnya.

#Kesalahan Umum dan Solusinya

#Font Tidak Tersedia

Font yang tidak terpasang akan digantikan font generik sehingga tampilan berbeda. Pastikan daftar font diakhiri kategori generik, atau gunakan layanan seperti Google Fonts.

#Latar Gambar Tidak Muncul

Penyebab paling umum adalah path url() yang salah. Path relatif di CSS dihitung dari lokasi file CSS, bukan dari HTML. Pada struktur css/style.css, gambar di folder project harus ditulis ../images/hero.jpg. Periksa juga status file di tab Network DevTools.

#Warna Kurang Kontras

Warna teks yang terlalu mirip dengan latar membuat konten sulit dibaca. Gunakan alat kontras atau pilih palet dengan perbedaan kecerahan yang jelas.

#Penutup

Inti yang harus dibawa pulang:

• font-family memakai daftar fallback dan diakhiri kategori generik.
• font-weight, line-height, dan letter-spacing membentuk ritme teks.
• Warna bisa ditulis sebagai kata kunci, heksadesimal, rgb(), atau hsl().
• background-size: cover dan background-position penting untuk gambar latar.
• Shorthand background menggabungkan semua properti latar dalam satu baris.
• Path gambar di CSS dihitung relatif dari lokasi file CSS.

Di episode 4 selanjutnya kita akan membahas box model, margin, padding, border, dan sizing — empat lapisan yang membentuk ruang setiap elemen, cara mengatur jarak, dan perbedaan content-box dengan border-box. Ini fondasi layout yang menentukan segalanya di episode-episode berikutnya.