Cara Membuat Teks / Font Berwarna di HTML

HTML adalah bahasa markup sandar dan umumnya sering digunakan oleh para web desain ketika ingin membuat tampilan web atau dokumen HTML-nya semakin menarik. Karena yang namanya web, kurang lengkap jika tampilannya juga kurang menarik salah satunya pada tampilan konten yang teksnya atau tulisannya hanya satu warna saja, seperti hitam.

Nah oleh karena itu, pada kondisi ini sobat dapat melakukan perubahan warna pada teks tertentu sesuai keiginan dengan menggunakan markup HTML. Biar lebih jelas, berikut ini prosedur untuk melakukannya:

1. Menambahkan atribut style pada tag untuk membuat teks berwarna
2. Contoh penulisan atribut style
3. Membuat Teks berwarna dengan CSS
4. Contoh penulisan CSS
5. Penutupan

Cara Pertama: Menambahkan Atribut Style (CSS) Secara Langsung

Untuk membuat teks berwarna dapat dilakukan dengan menambahkan atribut style dan properti CSS secara langsung pada tag yang teksnya ingin diberi warna.

Berdasarkan penjalasan diatas, untuk membuat teks berwarna pada tag HTML, sobat dapat menambahkan atribut style dan properti color: ;.

Contoh Atribut Style dengan Properti Color

Berikut ini contoh cara menambahkan atribut style dengan properti color pada tag <span> :

<span style="color: red;">Belajar HTML di Bang Feri Blog</span>

Untuk hasilnya kurang lebih sebagai berikut:

Belajar HTML di Bang Feri Blog

Nah, tanda kutip (" ") yang terdapat pada atribut style diatas adalah lokasi yang harus diisi dengan properti css. Properti css adalah kode css yang nantinya akan di eksekusi atau ditampilkan pada browser. Dengan kata lain properti css adalah perintah yang akan dieksekusi pada browser.

Catatan
Penggunan atribut style tidak hanya dapat digunakan pada satu tag saja, tetapi dapat digunakan pada tag yang lainnya juga. seperti <div>, <i>,<b>, <p> dan masih banyak lagi.

Serta dengan melakukan penulisan kode secara langsung pada tag. Hasilnya hanya akan dieksekusi pada satu tag saja, yaitu tag yang diberikan css secara langsung.

Cara Kedua: Membuat Font atau Teks berwarna dengan CSS

Yang dimaksud disini adalah Membuat teks berwarna tanpa menambahkan atribut style mapun properti CSS sacara langsung pada masing-masig tag melainkan secara terpisah.

Maksudnya seperti apa, bang?

Maksudnya dengan membuat artibut style menjadi tag baru yaitu <style>. Agar lebih jelas berikut ini cara penulisannya:

<style>
   span { color: red; }
</style>

<span>Belajar HTML di Bang Feri Blog</span>

Untuk hasilnya sebagai berikut:

Belajar HTML di Bang Feri Blog

Penjelasan Contoh

Pada contoh diatas ini, span yang terdapat di dalam tag style adalah selector. Tanda { dan } atau kurung kurawal adalah tempat untuk menuliskan properti yang akan dieksekusi di browser.

Serta, selector span yang ada pada tag style diatas ini, hasilnya tidak hanya akan dieksekusi pada satu tag span saja, melainkan akan dieksekusi pada semua tag span yang ada didalam dokumen secara bersamaan.

Tips
Coba sobat perhatikan properti color diatas. Kata red yang terdapat pada properti merupakan jawaban atau perintah warna yang nantinya akan eksekusi oleh browser.

Kata red dapat diganti dengan nama warna lainnya (dalam bahasa inggris) seperti green, blue, orange, dan sebagainya, tujuannya agar dapat dihasilkan warna yang lebih bervariasi. Sobat juga bisa mengganti warna dengan menggunakan kode HEX warna atau kode RGB warna. Contoh:

Warna	Kode HEX	RGB (Red, Green, Blue)
Jingga	#FFA500	rgb(255, 165, 0)

Penutupan

Nah, jadi seperti itulah cara membuat font atau teks berwarna di HTML. Bagaimana mudah bukan?

Saran saya, silahkan pilih salah satu cara diatas yang menurut sobat mudah untuk diterapkan.

Saya rasa cukup sekian artikel kali ini terima kasih telah berkunjung untuk belajar HTML disini, semoga yang telah saya bagikan dapat bermanfaat.

Salam Coding!

Share :