Cara Mengganti Warna Teks di HTML

Meskipun Anda bisa mengubah warna teks menggunakan penanda <font> pada HTML, metode ini tidak lagi didukung pada HTML5. Sebagai gantinya, Anda bisa menggunakan CSS dasar untuk menentukan tampilan warna teks pada beragam elemen di halaman web. Dengan menggunakan CSS, Anda bisa memastikan kecocokan halaman web dengan setiap peramban yang digunakan.

Metode 1

Metode 1 dari 2:

Menggunakan CSS

Unduh PDF

1
Buka berkas HTML. Cara terbaik untuk mengubah warna teks adalah menggunakan CSS. Atribut HTML lama <font> tidak lagi didukung pada HTML5. Metode yang lebih disarankan adalah penggunaan CSS untuk menentukan gaya atau desain elemen.
- Metode ini juga dapat diterapkan pada lembar gaya atau stylesheet eksternal (berkas CSS terpisah). Contoh-contoh di bawah ini merupakan contoh berkas HTML dengan lembar gaya internal.
Anda bisa menentukan gaya di dalam penanda ini ketika menggunakan lembar gaya internal.
3
Tikkan <style> untuk membuat lembar gaya internal. Ketika penanda <style> disisipkan di dalam penanda <head>, CSS di dalam penanda <style> akan diterapkan pada elemen-elemen yang sesuai di halaman web. Setelah selesai, bagian awal berkas HTML akan tampak seperti ini:^{[1]XTeliti sumber}
```
<!DOCTYPE html><html><head><style></style></head>
```
4
Tikkan elemen dengan warna teks yang ingin diubah. Anda perlu menggunakan segmen <style> untuk menentukan tampilan elemen yang berbeda pada halaman. Sebagai contoh, untuk mengubah gaya semua teks utama pada teks, tikkan formula berikut:
```
<!DOCTYPE html><html><head><style>body {}</style></head>
```
5
Tikkan atribut color: pada penyeleksi elemen. Atribut color: akan memerintahkan halaman untuk menampilkan warna yang perlu digunakan pada elemen yang bersangkutan. Sebagai contoh, atribut akan mengubah warna seluruh teks utama yang merupakan elemen utama untuk semua teks pada halaman:
```
<!DOCTYPE html><html><head><style>body {color:}</style></head>
```
6
Tikkan warna teks yang diinginkan. Ada tiga cara atau masukan yang bisa Anda gunakan untuk memilih warna: nama warna, nilai hex, atau nilai RGB. Sebagai contoh, untuk memasukkan warna biru, tikkan blue, rgb(0, 0, 255), atau #0000FF.
```
<!DOCTYPE html><html><head><style>body {color: red;}</style></head>
```

Anda bisa menggunakan beragam penyeleksi untuk mengubah warna teks pada bagian halaman yang berbeda:

<!DOCTYPE html><html><head><style>body {color: red;}h1 {color: #00FF00;}p {color: rgb(0,0,255)}</style></head><body><h1>Teks judul ini berwarna hijau.</h1><p>Teks paragraf ini berwarna biru.</p>Teks utama ini berwarna merah.</body></html>

8
Tentukan kelas CSS, dan bukan mengubah elemen. Anda bisa menentukan kelas CSS dan menerapkannya pada elemen-elemen yang diinginkan di halaman untuk menambahkan gaya kelas dengan cepat. Sebagai contoh, pada berkas ".redtext" berikut, elemen-elemen yang menggunakan kelas akan menampilkan teks berwarna merah:
```
<!DOCTYPE html><html><head><style>.redtext {color: red;}</style></head><body><h1 class="redtext">Teks judul ini berwarna merah</h1><p>Teks paragraf ini berwarna normal.</p><p class="redtext">Teks paragraf ini berwarna merah</p></body></html>
```
Iklan

Metode 2

Metode 2 dari 2:

Menggunakan Atribut Gaya dalam Baris (Inline)

Unduh PDF

Anda bisa menggunakan atribut gaya dalam baris untuk mengubah gaya satu elemen pada halaman. Langkah ini berguna untuk membuat satu atau dua perubahan cepat pada gaya, tetapi tidak disarankan untuk digunakan secara menyeluruh. Untuk perubahan gaya yang lebih komprehensif, gunakan metode sebelumnya.^{[2]XTeliti sumber}
2
Cari elemen pada berkas yang ingin diubah. Anda bisa menggunakan atribut ini untuk mengubah warna teks elemen apa pun. Sebagai contoh, jika Anda ingin mengubah warna teks judul tertentu, cari judul tersebut pada berkas HTML:
```
<!DOCTYPE html><html><body><h1>Ini adalah teks judul yang ingin diubah</h1></body></html>
```
3
Sisipkan atribut gaya pada elemen. Tikkan style="" di dalam penanda pembuka untuk elemen yang ingin diubah:
```
<!DOCTYPE html><html><body><h1 style="">Ini adalah teks judul yang ingin diubah</h1></body></html>
```

Sebagai contoh:

<!DOCTYPE html><html><body><h1 style="color:">Ini adalah teks judul yang ingin diubah</h1></body></html>

5
Tikkan warna yang ingin diterapkan pada teks. Ada tiga cara untuk mengubah warna: mengetikkan nama warna, nilai RGB, atau nilai hex. Sebagai contoh, untuk mengubah warna teks menjadi kuning, tikkan yellow;, rgb(255,255,0);, or #FFFF00;:
```
<!DOCTYPE html><html><body><h1 style="color:#FFFF00;">Teks judul ini sekarang berwarna kuning</h1></body></html>
```
Iklan