Cara Merubah Warna Background Dengan CSS (background-color)

Cara Merubah Warna Background Dengan CSS

Mulai dari seri ini kita akan mulai menulis kode CSS, dan untuk mengawali kita mulai yang paling mudah terlebih dahulu, yaitu merubah warna background dengan CSS. Untuk merubah warna background pada CSS kamu memerlukan sebuah property background, atau lebih spesifiknya background-color. Dan untuk nilai atau valuenya bisa berisi nama warna dalam bahasa inggris, hexa color, atau RGB color.

Untuk contoh mengisi nilai dengan warna bahasa inggris kamu hanya menulis nama warna pada value background-color tersebut. Misalnya : background-color: red, background-color: yellow, background-color: blue, background-color: green, dan lain sebagainya.

Sedangkan untuk mengisi nilai dengan hexa color yaitu dengan cara memasukkan kode warna hexa color. Contohnya background-color: #dd3c3c, background-color: #4f2cea, background-color: #ea2c2c, dan lainnya. Untuk mendapatkan kode warna dari hexa color kamu bisa mencarinya di google dengan kata kunci “color hex“, atau kamu dapat mengunjungi alamat http://www.color-hex.com/ kemudian geser-geser pada color picker yang ada di website tersebut ke warna yang kamu inginkan.

Gambar Hexa Color

Dan untuk mengisi warna dengan RGB color kamu cukup mengisi value background-color dengan kode warna RGB color. Contohnya background-color: rgb(81, 11, 245), background-color: rgb(92, 181, 47), background-color: rgb(234, 255, 37), dan lain sebagainya. Untuk mendapatkan kode warna RGB color kamu bisa mencarinya di google dengan kata kunci “RGB color“, atau bisa kunjungi halaman ini http://www.rapidtables.com/web/color/RGB_Color.htm dan geser-geser pada color picker ke warna yang kamu inginkan.

Gambar RGB Color

Dan berikut adalah contoh kode merubah warna background menggunakan CSS :

Dari kode diatas maka warna backgroundnya akan berwarna biru seperti gambar dibawah ini :

 

Cara Merubah Warna Background Dengan CSS

Pada contoh diatas pada baris nomor 6 terdapat selector body untuk merubah warna background, karena semua yang ada didalam tag body yang tampil pada browser. Kemudian didalam selector body terdapat property background-color yang berfungsi merubah warna background. Kemudian property background-color berisi rgb(81, 11, 245) merupakan kode warna RGB color. Kamu dapat mengganti value dari background-color dengan nama warna dalam bahasa inggris atau kode warna hexa color. Dan silakan mencobanya sendiri supaya lebih paham.

Demikian untuk cara merubah warna background dengan CSS, apabila kamu memiliki pertanyaan silakan sampaikan dikolom komentar.


Kolom Komentar

Related Post