Tutorial Belajar CSS: Cara Merubah Warna Teks (font) HTML dengan CSS

Setelah dalam 3 tutorial sebelum ini kita telah membahas cara mengganti jenis font di dalam CSS, dalam tutorial kali ini kita akan membahas Cara Merubah Warna Teks (font) HTML dengan CSS. Property yang akan kita gunakan adalah: color.


Cara Merubah Warna Teks dengan CSS

Perintah CSS yang digunakan untuk mengubah warna text HTML adalah dengan menggunakan property color, berikut contoh penulisannya:

h1 {
   color: blue;
}
p {
   color: #99FFAA;
}

Sebagai nilai untuk property color, bisa berupa keyword warna (seperti: red, blue, yellow, dll), bisa juga berupa notasi angka hexadesimal RGB (seperti: #112233, #ABCDEF) atau dalam bentuk desimal (seperti: rgb(0, 160, 255) atau rgb(0%, 63%, 100%)). Penjelasan lebih lanjut tentang pengertian metode warna ini bisa dibaca pada Tutorial Belajar CSS: Penulisan Kode Warna pada CSS.

Sebagai contoh tutorial, berikut adalah kode HTML dan CSS dengan penggunaan property color:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Property Color CSS</title>
<style type="text/css">
   .pertama {
   color: green;
   }
   .kedua {
   color: #335599;
   }
   .ketiga {
   color: rgb(200,200,0);
   }
</style>
</head>
<body>
   <h2>Belajar Property Color CSS:</h2>
  
   <h3>color: green</h3>
   <p class="pertama">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet.</p>
  
   <h3>color: #335599</h3>
   <p class="kedua">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae
   metus posuere laoreet.</p>
  
   <h3>color: rgb(200,200,0)</h3>
   <p class="ketiga">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae
   metus posuere laoreet.</p>
</body>
</html>

Tutorial Cara Merubah Warna Teks (font) HTML dengan CSSDalam contoh diatas, saya membuat 3 buah paragraf dengan class: pertama, kedua dan ketiga. Masing-masing class tersebut di set warna teks nya dengan CSS.


Cara Merubah Warna Teks untuk warna RGBA dan HSLA

Untuk penggunaan lebih lanjut, kita juga bisa menggunakan kode warna yang lebih advanced dengan kode warna RGBA atau HSLA seperti: rgba(0,0,255,0.2) dan hsla(240,100%,60%,0.8).

Penjelasan tentang warna RGBA dan HSLA bisa dibaca dalam artikel CSS: Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA.

Dengan kode warna RGBA dan HSLA, CSS menyediakan fitur yang memungkinkan kita untuk mengatur tingkat ke-transparanan warna. Namun fitur ini tidak bisa digunakan untuk web browser Internet Explorer dibawah versi ke-8. Karena IE 6 atau 7 tidak mengerti RGBA, maka warna text tidak dapat ditampilkan. Untuk mengatasi hal ini, kita akan menggunakan 2 buah property color, dan memanfaatkan sifat prioritas (cascading) dari CSS.

Idenya adalah jika web browser mendukung warna RGBA atau HSLA, maka web browser tersebut akan menampilkan warna tersebut berikut dengan fitur ‘transparan’-nya, namun jika web browser tidak mengerti kode warna RGBA (seperti IE 6 dan 7), maka web browser akan menampilkan warna tanpa efek transparan.

Sebagai contoh, untuk membuat warna text berwarna biru dengan efek transparan (alpha channel) sebesar 80%, maka kita bisa menulisnya sebagai berikut:

p {
   color: #0000FF; // properti ini hanya akan digunakan pada IE6 dan IE7
   color: rgba(0,0,255,0.8); // web browser modern akan menggunakan warna ini
}

Dengan memanfaatkan fitur cascading dari CSS, web browser modern seperti Google Chrome dan Firefox, akan menampilkan teks berwarna biru dengan efek transparant 80%. Hal ini karena urutan color terakhir adalah kode warna untuk RGBA yang akan menimpa kode warna RGB yang berada diatasnya.

Namun untuk IE 6 atau 7, warna akan tetap ditampilkan dengan warna biru (tanpa efek transparan) yang berasal dari perintah color pada baris pertama (karena kode color untuk baris kedua tidak “dimengerti” oleh web browser tersebut).

Penjelasan tentang fitur cascading dan specificity dari CSS ini telah kita bahas pada tutorial CSS Urutan Prioritas Selector CSS (Cascading) dan Urutan Prioritas Selector CSS (Specificity).

Kode warna RGBA dan HSLA lebih cocok digunakan untuk desain web yang saling menimpa (overlap), sehingga kita bisa membuat efek modern transparan. Namun perlu menjadi catatan bahwa tidak semua web browser mendukungnya. Sebaiknya efek warna RGBA dan HSLA hanya digunakan untuk fitur desain yang tidak berisi konten. Karena walaupun kita menggunakan 2 buah property color seperti diatas, pada web browser IE6 dan IE7, warna yang dihasilkan akan menutupi teks di bawahnya.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Tutorial Terkait:

19 Comments

  1. Tester
    27 Mar 15
    • Andre
      28 Mar 15
  2. Tester
    28 Mar 15
    • Andre
      29 Mar 15
  3. Tester
    29 Mar 15
    • Andre
      30 Mar 15
  4. syaikalrahman
    08 Apr 15
  5. Sainsseo
    08 Apr 15
  6. Sainsseo
    08 Apr 15
    • Andre
      09 Apr 15
  7. Anonymous
    17 Aug 15
    • Andre
      18 Aug 15
    • Armi
      09 Oct 15
  8. Armi
    09 Oct 15
    • Andre
      09 Oct 15
  9. Anonymous
    14 May 16
    • Andre
      15 May 16
  10. Malik Muqtadir
    14 Jun 17
    • Andre
      14 Jun 17

Add Comment