Setelah dalam 3 tutorial sebelum ini kita telah membahas cara mengganti jenis font di dalam CSS, dalam tutorial kali ini kita akan membahas Cara Merubah Warna Teks (font) HTML dengan CSS. Property yang akan kita gunakan adalah: color.
Cara Merubah Warna Teks dengan CSS
Perintah CSS yang digunakan untuk mengubah warna text HTML adalah dengan menggunakan property color, berikut contoh penulisannya:
h1 {
color: blue;
}
p {
color: #99FFAA;
}
Sebagai nilai untuk property color, bisa berupa keyword warna (seperti: red, blue, yellow, dll), bisa juga berupa notasi angka hexadesimal RGB (seperti: #112233, #ABCDEF) atau dalam bentuk desimal (seperti: rgb(0, 160, 255) atau rgb(0%, 63%, 100%)). Penjelasan lebih lanjut tentang pengertian metode warna ini bisa dibaca pada Tutorial Belajar CSS: Penulisan Kode Warna pada CSS.
Sebagai contoh tutorial, berikut adalah kode HTML dan CSS dengan penggunaan property color:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Property Color CSS</title>
<style type="text/css">
.pertama {
color: green;
}
 .kedua {
color: #335599;
}
 .ketiga {
color: rgb(200,200,0);
}
</style>
</head>
<body>
  <h2>Belajar Property Color CSS:</h2>
 Â
  <h3>color: green</h3>
  <p class="pertama">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>color: #335599</h3>
  <p class="kedua">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>color: rgb(200,200,0)</h3>
  <p class="ketiga">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 diatas, saya membuat 3 buah paragraf dengan class: pertama, kedua dan ketiga. Masing-masing class tersebut di set warna teks nya dengan CSS.
Cara Merubah Warna Teks untuk warna RGBA dan HSLA
Untuk penggunaan lebih lanjut, kita juga bisa 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).
Dengan kode warna RGBA dan HSLA, CSS menyediakan fitur yang memungkinkan kita untuk mengatur tingkat ke-transparanan warna. Namun fitur ini tidak bisa digunakan untuk web browser Internet Explorer dibawah versi ke-8. Karena IE 6 atau 7 tidak mengerti RGBA, maka warna text tidak dapat ditampilkan. Untuk mengatasi hal ini, kita akan menggunakan 2 buah property color, dan memanfaatkan sifat prioritas (cascading) dari CSS.
Idenya adalah jika web browser mendukung warna RGBA atau HSLA, maka web browser tersebut akan menampilkan warna tersebut berikut dengan fitur 'transparan'-nya, namun jika web browser tidak mengerti kode warna RGBA (seperti IE 6 dan 7), maka web browser akan menampilkan warna tanpa efek transparan.
Sebagai contoh, untuk membuat warna text berwarna biru dengan efek transparan (alpha channel) sebesar 80%, maka kita bisa menulisnya sebagai berikut:
p {
color: #0000FF; // properti ini hanya akan digunakan pada IE6 dan IE7
color: rgba(0,0,255,0.8); // web browser modern akan menggunakan warna ini
}
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 adalah kode warna untuk RGBA yang akan menimpa kode warna RGB yang berada diatasnya.
Namun untuk IE 6 atau 7, warna akan tetap ditampilkan dengan warna biru (tanpa efek transparan) yang berasal dari perintah color pada baris pertama (karena kode color untuk baris kedua tidak "dimengerti" oleh web browser tersebut).
Kode warna RGBA dan HSLA lebih cocok digunakan untuk desain web yang saling menimpa (overlap), sehingga kita bisa membuat efek modern transparan. Namun perlu menjadi catatan bahwa tidak semua web browser mendukungnya. Sebaiknya efek warna RGBA dan HSLA hanya digunakan untuk fitur desain yang tidak berisi konten. Karena walaupun kita menggunakan 2 buah property color seperti diatas, pada web browser IE6 dan IE7, warna yang dihasilkan akan menutupi teks di bawahnya.
Mau tanya kak, kalo cara untuk membuat komentar blog bisa diwarnai pengunjungnya itu gimana ya?
kalo tau tolong penjelasannya. makasih
Umumnya pengunjung tidak bisa mengubah efek tulisan di komentar sebuah web/blog. Pengujung yang iseng bisa saja menggunakan warna yang sangat tidak cocok, seperti menggunakan warna merah menyala :)
Oleh karena itu kebanyakan blog akan mematikan fitur ini. Jika mau mencoba, bisa menggunakan penulisan CSS inline, dengan menggunakan atribut style, seperti contoh berikut ini:
<p style="color: green;">Isi komentar disini….</p>
Tapi sekali lagi, biasanya si pembuat web akan menghalangi kita menyisipkan kode diatas.
maksutnya si pembuat web disini siapa ya kak?
maksudnya yang punya blog :)
Jadi gini lho kak, saya kan bikin blog..terus supaya font komentarnya bisa di warnai macem-macem sama yang nulis komentar itu perlu di kasih bumbu apa css/ htmlnya. begitu… :D
Ada yang bilang ditambah ini di custom template:
/* Add css for color text */
a {color:#d00000;} //merah
b {color:#00b400;} //hijau tua
i {color:#5757ff;} //biru tua
em {color:#906745;} //coklat
u {color:#F535AA;} //pink
code {color:#571B7E;} //ungu
strong {color:#ffff00;} //kuning
cite {color:#ccccff;} //biru muda
del {color:#ff9900;} //orange
Oh, itu maksudnya…
Bikin blognya pakai blogger ya?
Template diatas digunakan untuk mengubah warna teks pada tag html tertentu, seperti link (a), huruf tebal (b), huruf miring (i), dll. Tapi bukan untuk memberikan fasilitas kepada penulis komentar.
Dari sisi keamanan web, mengizinkan pengunjung untuk memilih warna sediri tidak disarankan. Karena bisa dimanfaatkan untuk menyisipkan kode tertentu. Saya sudah lama tidak menggunakan blogger, mungkin ada sejenis widget/plugin untuk keperluan ini.
keren,gampang juga ternyata buat nya!!
cara memberikan warna font pada scrip di bawah ini bagaimana gan?
Daftar Nilai
NamaJenis KelaminNilai
AndreLaki-laki
farhanLaki-laki
WahyudiLaki-laki
ToyibLaki-laki
mohon bantuannya!!
maaf,adauh kenapa jadi bentuk :D
padahal tadi nulis script nya!!!
bagaimana cara berikan warna gan .
Iya gan… untuk alasan keamanan, kode-kode HTML akan dihapus jika ditulis di komentar.
Kalau kodenya cukup panjang, bisa lewat email saja ke [email protected]
kak,kalo mau ganti font di judul blog gimana ya ?
Blog nya pakai blogspot y? Kalau untuk ini kita harus paham struktur template yang dipakai gan…
Dan ini tidak mudah bagi pemula, karena kita harus tau tag HTML apa yang dipakai untuk judul ini, dan selector CSS apa yang harus digunakan.
Cara paling gampang sih nyari template yang sudah menyertakan font yang agan cari :)
Bisa, masuk ke template, di bagian "tingkat lanjut" ada tempat ubah2 fontnya…
Kalau mau ganti warna background di dalam widget gimana ya?
Widget di blogspot y? kebetulan saya belum terlalu paham menu2 di dalam blogger, jadi belum bisa membantu nih..
mau tanyakk…ini scriptnya gimana??butuh bantuan…
Terdapat empat div seperti berikut
<div>Namaku Rani
<div>Anakku pertama Edi</div>
<div>Anakku kedua Siti</div>
<div>Anakku ketiga Johan</div>
</div>
Tanpa mengubah kode HTML tersebut, bagaimana cara agar tulisan
Anakku pertama Edi
Diberi warna biru, sedangkan yang lain hijau…
saya bisanya gini..
cssnya:
div{
color:green;
}
div.biru{
color:blue;
}
htmlnya:
<html>
<head>
<title>Selektor</title>
<link rel="stylesheet"type="text/css"href="css3.css">
</head>
<body>
<div>Namaku Rani
<div class="biru">Anakku pertama Edi</div>
<div>Anakku kedua Siti</div>
<div>Anakku ketiga Johan</div>
</div>
</body>
</html>
mohon di balas ya…maksih
Bisa pakai selector ini gan:
div{
color:green;
}
div :first-child{
color:blue;
}
Selector :first-child digunakan untuk mengakses anak pertama dari tag <div>, dikenal juga dengan sebutan "Structural Pseudo Class Selectors". Pembahasannya memang belum ada di web duniailkom, saat ini baru tersedia di eBook CSS Uncover duniailkom :)
kak . . kalo misal nya menggunakan id html . . css nya itu ga bisa pake text-color:#000; atau font-color:#000; gitu kak ?
Mungkin ada baiknya ikuti tutorial HTML dan CSS di duniailkom ini secara berurutan agar lebih paham tentang penggunaan selector "id". Selain itu di CSS tidak ada property text-color dan font-color, yang ada hanya color dan background-color.
Jika butuh panduan yang lebih dalam mengenai CSS, bisa order eBook CSS Uncover duniailkom :)
bang ADMIN, adakah fungsi HTML atau CSS untuk membuat pembagian tata layout WEB (frame)……???
Membuat layout perlu pemahaman mendalam tentang HTML dan CSS (tidak bisa sebagaian saja). Kalau di CSS nanti dasar materinya ada di box model dan property float. Tapi jika yang dimaksud adalah tag <frame> HTML, itu sudah "usang" dan disarankan tidak dipakai lagi.
Wh ,antap banget penjelasan sangat mudah untuk dimengerti,
Gua yang gak tau ngrubah warna di html gua jadi ngerti cara merubahnya
Bermanfaat om ilmunya,diterapin udah bisa di blog saya
Makasih
Jika hanya kata-kata tertentu yang diberikan warna berbeda (bukan hitam) bagaimana caranya ya?
Contoh saya memasukkan URL, kemudian URL tersebut ingin saya beri warna merah. Itu bagaimana ya?
kak mau tanya cara agar tulisan bisa di warnai salah satu kata seperti tuliasan duniailkum.com gimana yah?
bang, gimana kalau mau ubah semua font di css wordpres ya. misal seluruh font web (blog) warnanya putih. Terus mau diganti font warna hitam. Mungkin bawaan thema gitu.