Cara Mudah Mengubah Warna Background Website – Untuk kamu yang baru saja belajar membuat website, tentunya kamu akan mempelajari HTML dan juga CSS jika benar-benar ingin mahir mengenal dasarnya. Akan berbeda rasanya jika kamu langsung belajar Framework CSS yang tidak begitu mengharuskan kamu benar-benar paham dengan HTML + CSS misalnya seperti Bootstrap.
Untuk membuat sebuah website saja bahkan kamu hanya tinggal memanggil nama class saja dan hasilnya sudah cukup rapi tanpa perlu mengetikkan koding CSS manual.
Nah, untuk kamu yang benar-benar awam, tentunya ada beberapa hal yang sering membuatmu kebingungan saat mengubah suatu desain pada CSS. Sebagai contoh, misalnya kamu men-download template dari internet karena ingin melihat bentuk kodingnya seperti apa. Setelah itu, biasanya kamu akan penasaran dengan mencoba mengubah isi template mulai dari warna, gambar, tulisan dan lain-lain.
Namun, kemungkinan kamu akan merasa sulit untuk mengubahnya karena masih pemula dan belum banyak paham mengenai kodingnya. Sebagai contoh kamu tidak bisa mengubah warna background website di template tersebut.
Nah, DUMET School akan memberikan sedikit tips untuk mengubah warna background website dengan CSS.
Cari file CSS-nya terlebih dahulu
- Kalau kamu men-download template, cari folder bernama css atau assets.
- Cari file CSS yang biasanya bernama style/styles/main dan berekstensi .css
- Buka file-nya.
Ubah Warna Background-nya
- Cari tulisan “body” yang biasanya ada di baris teratas.
- Cari tulisan “background” atau “background-color“.
- Ubah dengan kode warna di bagian setelah tanda hashtag.
Biasanya kode awalnya akan seperti berikut ini:
body{
background: #2ecc71;
font-family: arial;
color:#2c3e50;
}
Tips Mencari Kode Warna
Karena CSS menggunakan kode hexa sebagai sebutan warna, kamu bisa mencari listnya dengan mengetikkan “color hex code” di Google.
Perhatikan kode di bawah ini. Yang berbeda adalah kode yang ada di dalam background.
body{
background: #746ab0;
font-family: arial;
color:#2c3e50;
}
Setelah diubah, warna background di website akan berubah menjadi seperti berikut ini:
Bagaimana? Mudah bukan? Semoga artikel ini bermanfaat ya! Jika kamu mau paham lebih banyak dan detail tentang pembuatan website, kamu bisa pelajari dengan mangambil paket kursus website di DUMET School.