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

Posted on

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


Cara Merubah Warna Teks dengan CSS

Petunjuk CSS yang digunakan bagi mengubah warna text HTML ialah dengan menggunakan property color, berikut contoh penulisannya:

Selaku nilai bagi property color, dapat berupa keyword warna (seperti: red, blue, yellow, dll), dapat pun berupa notasi angka hexadesimal RGB (seperti: #112233, #ABCDEF) atau pada format desimal (seperti: rgb(0, 160, 255) atau rgb(0%, 63%, 100%)). Penjelasan lebih lanjut mengenai pengertian sistem warna ini dapat dibaca di Tutorial Belajar CSS: Penulisan Kode Warna pada CSS.

Selaku contoh panduan, berikut ialah kode HTML dan CSS dengan pemakaian property color:

 Pada contoh diatas, saya merancang 3 buah paragraf dengan class: pertama-tama, kedua dan ketiga. Masing-masing class tersebut di set warna teks nya dengan CSS.


Cara Merubah Warna Teks bagi warna RGBA dan HSLA

Bagi pemakaian lebih lanjut, kita pun dapat 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 mengenai warna RGBA dan HSLA dapat dibaca pada artikel CSS: Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA.

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

Idenya ialah bila web browser mendukung warna RGBA atau HSLA, karenanya web browser tersebut akan menampilkan warna tersebut berikut dengan fitur ‘transparan’-nya, namun bila web browser tak paham kode warna RGBA (seperti IE 6 dan 7), karenanya web browser akan menampilkan warna tanpa efek transparan.

Selaku contoh, bagi merancang warna text berwarna biru dengan efek transparan (alpha channel) sebesar 80%, karenanya kita dapat menulisnya selaku berikut:

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 ialah kode warna bagi RGBA yang akan menimpa kode warna RGB yang berada diatasnya.

Namun bagi IE 6 atau 7, warna akan tetap ditampilkan dengan warna biru (tanpa efek transparan) yang berasal dari command color di baris pertama-tama (karena kode color bagi baris kedua tak “dimengerti” oleh web browser tersebut).

Penjelasan mengenai fitur cascading dan specificity dari CSS ini telah kita bahas di panduan CSS Urutan P
rioritas Selector CSS (Cascading)
dan Urutan Prioritas Selector CSS (Specificity).

Kode warna RGBA dan HSLA lebih cocok digunakan bagi desain web yang saling menimpa (overlap), sehingga kita dapat merancang efek modern transparan. Namun perlu menjadi catatan bahwa tak segala web browser mendukungnya. Sebaiknya efek warna RGBA dan HSLA hanya digunakan bagi fitur desain yang tak berisi konten. Karena walaupun kita menggunakan 2 buah property color seperti diatas, di web browser IE6 dan IE7, warna yang diraih akan menutupi teks di bawahnya.


eBook CSS Uncover Duniailkom

Seandainya sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/