CSS Text Color (Tutorial CSS Part 31)

Gambar 31: Logo CSS

Teks di website itu ibarat "suara" dari halaman kita. Kalau suaranya ngga jelas, pengunjung bisa langsung kabur! Nah, biar teks kamu makin kece dan mudah dibaca, yuk pelajari gimana cara mainin warna teks dan background-nya pakai CSS.

1. 🖌️ Text Color: Ngatur Warna Teks

Cara paling basic dalam CSS untuk ngatur warna teks adalah dengan properti color.

Contohnya:

p {
  color: red;
}

Dengan kode di atas, semua paragraf (<p>) bakal tampil dengan warna teks merah.

Tapi CSS itu fleksibel banget. Warna nggak cuma ditulis pakai nama kayak red, blue, green, tapi bisa juga:

💡 HEX: #ff0000 (merah)
🌈 RGB: rgb(255, 0, 0)
🎨 HSL: hsl(0, 100%, 50%)

Contoh HTML + CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <style>
    h1 {
      color: #2c3e50;
    }
    p {
      color: rgb(46, 204, 113);
    }
  </style>
</head>
<body>
  <h1>Judul dengan Warna Gelap Elegan</h1>
  <p>Teks paragraf ini tampil dengan warna hijau segar dari RGB.</p>
</body>
</html>

Hasilnya:

Gambar 31.1 : Contoh CSS color

2. 🌈 Kombinasi Text Color dan Background Color

Kadang, warna teks aja nggak cukup. Kita juga perlu atur warna background supaya teksnya makin standout.

Gunakan background-color untuk kasih warna latar belakang.

Contoh:

.highlight {
  color: white;
  background-color: #3498db;
  padding: 10px;
}

Contoh HTML-nya:

<!DOCTYPE html>
<html lang="id">
<head>
  <style>
    .highlight {
      color: white;
      background-color: #3498db;
      padding: 12px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <p class="highlight">Teks ini putih di atas background biru kece!</p>
</body>
</html>

Hasilnya:

Gambar 31.2 : Contoh CSS background-color

🎯 Tips Kombinasi Warna:

Gunakan warna yang kontras tinggi (misal: putih di atas hitam, biru tua di atas kuning muda).
Hindari warna teks yang terlalu mirip dengan background (contoh: abu-abu di atas abu-abu muda = bahaya! 👀).
Coba tool seperti coolors.co untuk cari inspirasi palet warna keren.

🧠 Kenapa Warna Teks & Background Penting?

Meningkatkan keterbacaan – Warna yang pas bikin teks enak dibaca, nggak bikin mata cepat lelah.
Memperkuat branding – Warna yang konsisten bisa bikin pengunjung langsung tahu: "Oh ini warna khas brand ini!"
Memancing emosi pembaca – Warna punya efek psikologis. Contoh: biru = tenang, merah = semangat.

🔚 Penutup

Ngatur warna teks dan background di CSS itu gampang, tapi dampaknya gede banget! Cukup dengan properti color dan background-color, kamu udah bisa mainin estetika web dan bikin tampilan jadi lebih profesional.

Mulai dari warna merah menyala sampai biru yang menenangkan, semua bisa kamu atur semau kamu. Jangan takut bereksperimen ya!

📌 Selanjutnya kamu bisa coba belajar tentang:

CSS Font Style
CSS Text Alignment
CSS Line Height

Kalau kamu suka artikel ini, share ke teman-teman coding kamu, atau simpan buat referensi saat ngoding!

filesop.com