Mengatur Warna Latar Belakang dengan background-color di HTML dan CSS
background-color adalah properti CSS yang digunakan untuk mengatur warna latar belakang suatu elemen HTML. Warna latar belakang bisa berupa warna solid, gradient, atau bahkan gambar.
Cara Menggunakan background-color
Properti background-color digunakan dalam style sheet CSS. Anda bisa menambahkannya dalam berbagai cara, seperti:
1. Dalam elemen <style> di dalam HTML:
Contoh background-color
Warna latar belakang telah berubah!
2. Dalam file CSS eksternal:
Contoh background-color
Warna latar belakang telah berubah!
style.css :
body {
background-color: lightblue;
}
3. Langsung pada elemen HTML menggunakan atribut style:
Contoh background-color
Warna latar belakang telah berubah!
Menggunakan Nilai Warna
Anda dapat menggunakan berbagai cara untuk menentukan warna:
- Nama warna:
lightblue,red,green,black,white, dll. - Kode heksadesimal:
#FF0000(merah),#00FF00(hijau),#0000FF(biru), dll. - Kode RGB:
rgb(255, 0, 0)(merah),rgb(0, 255, 0)(hijau),rgb(0, 0, 255)(biru), dll. - Kode HSL:
hsl(0, 100%, 50%)(merah),hsl(120, 100%, 50%)(hijau),hsl(240, 100%, 50%)(biru), dll.
Contoh Penggunaan background-color:
Contoh background-color
Judul
Ini adalah paragraf dengan warna latar belakang hijau muda.
Tips:
- Gunakan alat pemilih warna online atau aplikasi desain untuk membantu memilih warna yang tepat.
- Perhatikan kontras warna untuk memastikan teks tetap mudah dibaca.
- Gunakan warna yang sesuai dengan tema desain website Anda.
Dengan menggunakan background-color, Anda dapat dengan mudah mengontrol tampilan website Anda dan membuatnya lebih menarik secara visual.