Pernah nggak, kamu buka sebuah website dan langsung betah berlama-lama di sana — padahal isinya biasa aja? Sebaliknya, ada website yang kontennya bagus, tapi rasanya capek banget dibacanya. Apa bedanya? Jawabannya ada di warna, teks, dan font CSS.
Di artikel sebelumnya, kamu sudah kenalan sama sintaks CSS dan cara menghubungkannya ke HTML. Nah sekarang saatnya kita masuk ke bagian yang paling langsung kelihatan hasilnya: bikin teks tampil lebih menarik, memilih warna yang pas, dan mengganti font bawaan browser yang membosankan itu.
Artikel ini cocok banget buat kamu yang sudah paham HTML dan baru mulai belajar CSS. Siap? Kita mulai dari yang paling simpel dulu.
CSS = Kuas & Cat untuk HTML-mu
Kalau HTML adalah kerangka rumah (tembok, pintu, jendela), maka CSS adalah cat, wallpaper, dan dekorasi interiornya. Properti CSS seperti color, font-family, dan font-size adalah alat utamamu untuk mengubah halaman web dari polos menjadi profesional.
🎨 Warna CSS: Lebih dari Sekadar "Merah" atau "Biru"
Di CSS, kamu punya tiga cara utama untuk menyebut warna. Bayangkan kamu memesan kopi: bisa bilang "kopi hitam", bisa juga sebut komposisinya "espresso 30ml, air 120ml, susu 50ml" — hasilnya sama, tapi caranya beda. Begitu juga warna CSS.
Fakta Menarik
Browser modern mengenali lebih dari 140 nama warna dalam bahasa Inggris — dari red dan blue, sampai nama-nama eksotis seperti rebeccapurple (ya, nama orang beneran!) dan papayawhip. 🍍
Berikut tiga format warna CSS yang wajib kamu tahu:
| Format | Contoh | Kapan Dipakai? |
|---|---|---|
| Named Color | red, blue, coral |
Prototipe cepat, belajar |
| HEX | #6366f1, #ff5733 |
Paling umum, copy dari Figma/desain |
| RGB / RGBA | rgb(99,102,241) |
Saat butuh transparansi (pakai RGBA) |
| HSL | hsl(239, 84%, 67%) |
Saat butuh variasi terang/gelap mudah |
Coba langsung praktikkan ini di file CSS-mu:
h1 { color: #6366f1; /* warna teks dengan HEX */ } p { color: rgb(51, 65, 85); /* warna teks dengan RGB */ } .card { background-color: #f8fafc; /* warna latar */ color: #1e293b; /* warna teks di atas latar */ } .overlay { background-color: rgba(0, 0, 0, 0.5); /* hitam 50% transparan */ }
Tips Pro
Selalu pastikan ada kontras yang cukup antara warna teks dan latar belakang. Standar aksesibilitas web (WCAG) merekomendasikan rasio kontras minimal 4.5:1 untuk teks normal. Kamu bisa cek pakai tool gratis seperti WebAIM Contrast Checker.
🅰️ Font CSS: Ganti Tampilan Teks dari Membosankan jadi Berkarakter
Font itu seperti suara. Satu tulisan yang sama bisa terasa berbeda tergantung "suara" yang dipakai — serius, santai, modern, atau klasik. Properti font CSS yang paling sering kamu pakai adalah font-family, font-size, font-weight, dan font-style.
🚀 Cara Pakai Google Fonts dalam 3 Langkah
Kunjungi fonts.google.com dan pilih font favoritmu
Klik font yang kamu mau, lalu pilih "weight" (ketebalan) yang diperlukan. Rekomendasiku: cukup pilih 1–2 weight untuk menghindari halaman jadi lambat.
Salin tag <link> dan tempel di dalam <head> HTML-mu
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
Pakai di CSS-mu dengan font-family
body {
font-family: 'Inter', sans-serif;
}
Berikut contoh properti font CSS yang sering dipakai:
h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 2.5rem; /* 1rem = 16px pada umumnya */ font-weight: 700; /* 400 = normal, 700 = bold */ font-style: normal; /* atau italic */ letter-spacing: -0.02em; /* jarak antar huruf */ } p { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.75; /* jarak antar baris — penting! */ }
Insight Penting
Selalu tambahkan fallback font setelah nama font utamamu — misalnya 'Inter', sans-serif. Ini "rencana cadangan" jika font dari Google gagal dimuat. Tanpa fallback, browser akan pakai font defaultnya yang sering kali kurang menarik.
✍️ Properti Teks CSS: Sentuhan Akhir yang Bikin Beda
Sudah punya warna yang keren dan font yang ciamik? Sekarang finishing touch-nya. Properti teks CSS seperti text-align, text-decoration, dan text-transform adalah sentuhan terakhir yang menentukan apakah halaman webmu terasa "jadi" atau setengah matang.
🔍 Properti Teks Paling Berguna — Lengkap dengan Efeknya
text-align
Rata teks — nilai: left, right, center, justify. Judul biasanya center, isi artikel sebaiknya left untuk keterbacaan.
text-decoration
Dekorasi teks — bisa buat underline, line-through, atau hapus garis bawah link dengan nilai none.
text-transform
Ubah kapitalisasi — uppercase (HURUF BESAR), lowercase (huruf kecil), capitalize (Setiap Kata).
line-height
Jarak antar baris — nilai terbaik untuk body text adalah antara 1.5 hingga 1.8. Default browser (1.2) terlalu rapat!
text-shadow
Bayangan teks — sintaks: text-shadow: x y blur color. Gunakan seperlunya — kalau berlebihan jadi norak! 😅
.hero-title { text-align: center; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 2px 4px 12px rgba(0,0,0,0.3); } .article-body { text-align: left; line-height: 1.8; word-spacing: 0.05em; } a { text-decoration: none; /* hapus garis bawah default link */ color: #6366f1; } a:hover { text-decoration: underline; /* muncul saat hover */ }
Perhatian
Hindari text-align: justify untuk teks panjang di web. Meskipun terlihat "rapi", justify bisa menciptakan celah besar antar kata yang justru menurunkan keterbacaan — terutama di layar kecil (HP).
🎯 Kombinasi Warna, Teks & Font CSS: Studi Kasus Nyata
Teori sudah, saatnya kita lihat bagaimana semua properti ini bekerja bersama untuk menghasilkan komponen yang siap pakai. Contoh berikut adalah sebuah kartu artikel blog — persis seperti yang mungkin ada di website kamu suatu hari nanti.
/* === Kartu Artikel Blog === */ .artikel-card { background-color: #ffffff; border-radius: 16px; padding: 32px; } .artikel-card .kategori { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.1em; } .artikel-card h2 { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 700; color: #0f172a; line-height: 1.3; margin: 8px 0 12px; } .artikel-card p { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; color: #64748b; line-height: 1.75; } .artikel-card .baca-selengkapnya { color: #6366f1; font-weight: 600; text-decoration: none; }
Insight: Aturan "3 Font"
Dalam satu halaman web, idealnya kamu hanya pakai maksimal 2–3 font berbeda. Misalnya: satu font serif untuk judul (seperti Playfair Display), satu font sans-serif untuk isi konten (seperti Inter atau Plus Jakarta Sans), dan satu font monospace khusus untuk kode. Lebih dari itu, halaman kamu akan terasa "ramai" dan tidak profesional.
Kamu Sekarang Punya Kontrol Penuh atas Tampilan Teks Webmu 🎉
Di artikel ini, kamu sudah belajar tiga pilar utama tampilan teks di CSS:
- Warna CSS — dengan format HEX, RGB/RGBA, dan named colors, kamu bisa tentukan warna teks dan latar dengan presisi.
- Font CSS —
font-family,font-size, danfont-weightadalah trio andalan untuk mengatur tampilan font. - Properti Teks CSS —
line-height,letter-spacing, dantext-alignmenentukan keterbacaan dan perasaan keseluruhan halaman.
Menguasai warna, teks, dan font CSS adalah fondasi yang akan kamu pakai terus sepanjang perjalanan belajar web development. Semakin sering praktik, semakin terasa "feel"-nya.
💬 Yuk Diskusi!
Font favoritmu dari Google Fonts apa? Atau ada pertanyaan seputar properti warna teks font CSS yang belum jelas? Tinggalkan komentar di bawah — saya baca dan balas semua! Kalau artikel ini bermanfaat, share ke teman-teman yang juga lagi belajar web ya 🙏
Tags Artikel
