Belajar css 4: warna pada css

Kali ini kita akan belajar tentang warna pada css, serta bagaimana cara untuk penerapan daripada nilai/value warna itu sendiri.

belajar warna pada css

Di materi ini saya juga mau membahas mengenai properti yang berhubungan dengan warna di css yaitu color.

Warna pada CSS

Warna pada css biasanya ditentukan menurut value/nilai sebagai berikut:

warna css menggunakan nama warna
warna css menggunakan hexadesimal
warna css menggunakan RGB

Warna css menggunakan nama warna

Dimana elemen html yang akan diberikan warna dengan css, menggunakan nama warna itu sendiri secara langsung untuk nilai pada properti css-nya.

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 pada bagian 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 menampilkan text berwarna kuning seperti gambar dibawah ini:

Warna css menggunakan hexadesimal

Warna css dengan hexadesimal juga dikenal dengan nama warna nilai hex.

Dalam artian? Jadi nilai hex ini merupakan nilai yang terdiri dari huruf maupun angka yang dapat menentukan warna apa yang akan diterapkan pada elemen html.

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>

Dari kodingan html diatas dapat dilihat gambar dibawah ini menampilkan text dengan 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 rgb adalah sebagai berikut.

rgb(number, number, number)

Sebagai contoh rgb(255,255,255) atau rgb(0,0,255) dan lain-lain.

Contoh penggunaannya pada css

.color-rgb {    
  color: rgb(0,0,255);
}

saat kita padukan dengan html maka kodingannya seperti 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

Contoh warna pada css menggunakan nama warna, hexadesimal dan rgb

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.

Daftar Tutorial CSS

Comments