Bagaimana Cara Merubah Warna Teks (font) HTML dengan CSS

Text Color S

Ada kalanya kita ingin merubah warna dari text tertentu dalam website kita, misalnya pada bagian judul atau subjudul dibuat warnanya berbeda dengan isi nya. dalam css kita bisa merubah text atau tulisan tertentu menjadi warna yang kita suka dengan menggunakan property color css.

dalam tutorial ini saya akan mengajarkan cara merubah warna text dengan css, baik itu text dalam bentuk paragraf maupun dalam tag heading. diakhir tutorial ini saya akan membuat contoh yang lengkap agar mudah dipahami.

Bagaiman Merubah Warna Teks dengan CSS

Pertannyaan ini sering saya tanyakan ketika saya masih belajar css, sebenarnya jawaban dari pertanyaan ini sangat mudah kita karena perintah css untuk merubah warna text hanya menuliskan property color: red; maka tulisan akan berubah warnanya.

tapi untuk pemula mungkin ini terlihat sulit, oleh karena itu saya akan menjelaskan tentang property color dan juga nilai yang bisa dipakai property color. berikut contoh penggunaan property color

h1 {
   color: #00ff00;
   }

p {
  color: rgb(0,0,255);
  }

dari contoh style css diatas berfungsi untuk mebuat warna h1 hijau, warna untuk paragraf biru.

property color memiliki nilai, nilai property color bisa nama warna seperti “black”, atau “red”. boleh juga memakai angka hex seperti ini “#00ff00” atau memakai angaka desimal seperti ini “rgb(0,0,255)”.

untuk lebih mudah dipahami berikut adalah contoh property color dan penerapan nilai warnanya.

<!DOCTYPE html>
<html>
<head>
<style>
.biru {
color: blue;
}
.hex {
color: #00ff00;
}
.des{
color: rgb(255, 0, 255);
}
</style>
</head>
<body>
<h2>Property Color CSS</h2>

<h3>color: Blue</h3>
<p class="biru">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>Hexsa color: #00ff00</h3>
<p class="hex">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>Desimal color: rgb(255, 0, 255)</h3>
<p class="des">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>

dalam contoh ini saya membuat class untuk masing-masing warna, dan nilai dari warna ini bisa anda lihat pada judul masing-masing paragraf.

Warna RGBA, HSL dan HSLA

sebenarnya kita bisa juga membuat warna text dengan warna RGBA, HSL dan HSLA, dimana kode warna ini lebih lengkap lagi. contoh kode warna RGBA rgba(255, 0, 0, 0.3); ini untuk merah, HSL hsl(120, 100%, 50%); untuk hijau, HSLA hsla(120, 100%, 75%, 0.3);} untuk light green.

untuk melihat hasil dari ketiga jenis warna ini saya akan menyuruh anda untuk mengedit kode diatas, ganti style contoh diatas dengan style dibawah ini

<style>
.biru {
color: rgba(255,0,0,0.3);
}
.hex {
color: hsl(290,60%,70%);
}
.des{
color: hsla(120, 100%, 50%, 0.3);
}
</style>

lalu jangan lupa jalankan. dan lihat hasil dari kode warna RGBA, HSL, dan HSLA ini berbeda dengan warna seperti biasanya, warna dari ketiga jenis warna ini memiliki warna yang kurang terang (transparan).

kelemahan dari warna RGBA, HSL dan HSLA, adalah tidak support terhadap semua browser, terutama browser IE, kecuali anda memakai versi yang tinggi.

untuk warna-warna RGBA, HSL dan HSLA paling banyak dipakai bukan untuk warna text melainkan dipakai untuk background color, jadi untuk warna text pakailah warna hexsadesimal, desimal, ataupun rgb

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas