Belajar CSS : Background, Color, Fill (Perbedaan, Fungsi, dan Cara Penerapan)

Selamat datang sahabat blogger, ketika anda ingin mengubah warna pada template blog pasti anda sering menemukan kode CSS background, color, dan fill.

Pasti di antara sebagian blogger bertanya seperti ini :

Apakah ketiga kode tersebut berbeda?
Apa sih fungsi dari masing masing kode tersebut?
Bagaimana cara penerapan yang benar?

Nah semuanya akan kita bahas lengkap di postingan ini, mari kita mulai.

CSS Background

Seperti namanya dapat diartikan sebagai latar belakang. Biasanya kode Background digunakan untuk mengubah warna latar belakang sebuah objek.

Contohnya jika anda ingin mengubah warna pada Header, maka anda gunakan kode di bawah ini.

#header { 
background : #ffffff
}

Kode di atas berfungsi untuk mengubah warna background header menjadi putih, anda bisa mengganti kode #ffffff dengan warna kesukaan anda.

CSS Color

Penerapan color sendiri lebih identik kepada text. Seperti Judul blog, Snippet, breadcrumbs, h1,h2,h3, dan lain lain.

Sebagai contoh anda ingin mengubah warna text breadcrumbs.

.breadcrumbs a{
color : #ffffff
}

atau bahkan anda ingin mengubah warna text pada breadcrumbs ketika kursor berada di atas breadcrumbs gunakan CSS di bawah.

.breadcrumbs a : hover {
color : #000000
}

Penambahan kode hover berfungsi untuk memberitahu bahwa kursor berada di atas objek.

CSS Fill

berfungai untuk mengubah warna sebuah objek pada blog seperti warna pada icon SVG.

Sebagai contoh anda ingin mengubah warna icon svg pada search box anda. Gunakan kode di bawah ini.

.search-box : svg path{
fill : #000000
}

Perbedaan antara Background, Color dan Fill

dari penjelasan di atas dapat kita temukan perbedaannya dimana Background berfungsi untuk mengubah warna pada latar belakang, dan Color berfungsi untum mengubah warna seperti text, sedangkan fill berfungsi untuk mengubah warna sebuah icon seperti SVG.

Tambahan

Untuk memasukkan kode warna anda bisa menggunakan warna CMYK (warna yang memiliki 6 digit seperti #000000) atau warna RGB (warna yang memiliki 3 digit seperti #000).

Oh iya masih ada lagi cara pewarnaan pada blog, anda juga bisa menggunakan kode warna dalam bahasa inggris seperti :

red (untuk warna merah)
green (untuk warna hijau)
blue (untuk warna biru)
yellow (untuk warna kuning)
purple (untuk warna ungu)
dan masih banyak lagi.

Bagi anda yang tidak mau repot memilih kode warna anda bisa menggunakan toll yang sudah saya buat di COLOR PICKER.

ID SCORPION