Unduh PDF
Unduh PDF
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.
Langkah
-
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.
-
Tempatkan kursor di dalam penanda <head> . Anda bisa menentukan gaya di dalam penanda ini ketika menggunakan lembar gaya internal.
-
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] X Teliti sumber
<!DOCTYPE html> < html > < head > < style > </ style > </ head >
-
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 >
-
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 >
-
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 >
-
Tambahkan penyeleksi lain untuk mengubah warna elemen-elemen lain. 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 >
-
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
-
Buka berkas HTML. 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] X Teliti sumber
-
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 >
-
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 >
-
Tikkan atribut color: di dalam entri "" . Sebagai contoh:
<!DOCTYPE html> < html > < body > < h1 style = "color:" > Ini adalah teks judul yang ingin diubah </ h1 > </ body > </ html >
-
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
Tips
- Anda bisa melihat daftar nama-nama warna yang didukung dan nilai-nilai hex -nya di http://www.w3schools.com/colors/colors_names.asp
Iklan
Referensi
Iklan
