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

0
A+ A-
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:
1
2
3
4
5
6
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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.

Share to:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
Top