Saya yakin yang namanya warna kamu pasti tahu. Di kehidupan kita sehari-haripun warna sering kita temui.
Mengenai warna kali ini kita akan belajar tentang warna pada css.
Dimana penggunaan warna pada css tak pernah lepas, apalagi dalam mendesain website dengan css.
Warna pada CSS
Warna pada css biasanya ditentukan menurut value/nilai sebagai berikut:
- Color name css(warna css menggunakan nama warna)
- Hexadesimal color value css(warna css menggunakan hexadesimal)
- RGB value css(warna css menggunakan RGB)
Warna css menggunakan nama warna
dimana elemen html yang akan diberikan warna dengan css. Pada css nya menggunakan nama warna itu sendiri secara langsung.
Misalnya : white, black, yellow, green dan lain-lain.
contoh penggunaan
.color-name {
color: yellow;
}
misalkan saya mau pada kodingan dari html dbawah ini yaitu ketika tampil pada web browser maka pada textnya berwarna kuning(yellow).
<!DOCTYPE html>
<html>
<head>
<title> Warna Pada Css </title>
<style type="text/css">
.color-name {
color: yellow;
}
</style>
</head>
<body>
<p class="color-name">Learn with staykoding! </p>
</body>
</html>Maka hasilnya akan seperti dibawah ini:
 |
| Text menjadi warna kuning |
Warna css menggunakan hexadesimal
Warna css dengan hexadesimal juga dikenal dengan nama warna nilai hex.
Maksudnya seperti apa? Jadi nilai hex ini merupakan nilai yang terdiri dari huruf maupun angka yang dapat menentukan warna apa yang akan diterapkan.
Nilai hex tersebut dimulai dari angka 0 sampai 9 hingga huruf a sampai f.
Misalnya: #ffffff, #000000, #0000ff, #ab9900, dan lain-lain.
Contoh penggunaan
.color-hex {
color: #00ff00;
}Ketika diterapkan dengan kodingan html dibawah ini, maka warna textnya akan berwarna hijau
<!DOCTYPE html>
<html>
<head>
<title> Warna Pada Css </title>
<style type="text/css">
.color-hex {
color: #00ff00;
}
</style>
</head>
<body>
<p class="color-hex">Learn with staykoding! </p>
</body>
</html>Maka hasilnya dapat dilihat dibawah ini:
 |
| Text menjadi warna hijau |
Warna css menggunakan RGB
Pernah dengar warna RGB? RGB merupakan singkatan dari R yaitu red, G yaitu green dan B yaitu blue.
Dapat diartikan kalau warna RGB merupakan warna hasil campuran dari 3 warna itu tadi red(merah), green(hijau) dan blue(biru).
Untuk format penulisan warna dengan css sendiri adalah sebagai berikut.
rgb(<number>,<number>,<number>)
Sebagai contoh
rgb(255,255,255) atau rgb(0,0,255) dan lain-lain.
Contoh penggunaan pada css
.color-rgb(
color: rgb(0,0,255);
)saat saya padukan dengan html maka kodingannya dibawah ini
<!DOCTYPE html>
<html>
<head>
<title> Warna Pada Css </title>
<style type="text/css">
.color-rgb {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<p class="color-rgb">Learn with staykoding! </p>
</body>
</html>Ketika kode html dijalankan pada browser maka akan tampil seperti dibawah ini
 |
| Text menjadi warna biru |
Contoh warna pada css menggunakan nama warna, hexadesimal warna dan rgb warna
| Warna | Nama Warna | HEX Warna | RGB Warna |
|---|---|---|---|
| Red | #ff0000 | rgb(255,0,0) | |
| White | #ffffff | rgb(255,255,255) | |
| Silver | #c0c0c0 | rgb(192,192,192) | |
| Black | #000000 | rgb(0,0,0) | |
| Yellow | #ffff00 | rgb(255,255,0) | |
| Blue | #0000ff | rgb(0,0,255) | |
| Aqua | #00ffff | rgb(0,255,255) |
cukup sekian pembahasan kita kali ini mengenai warna pada css, semoga dapat membantu teman- teman untuk lebih paham dalam belajar css.
0 Komentar