Mengubah Warna Latar Belakang atau Background dengan CSS
Selamat berjumpa lagi, tutorial selanjutnya yaitu mengubah warna latar belakang atau background dengan CSS (cascadding style sheet). Biasanya, warna suatu halaman otomatis memiliki latar belakang atau background dengan warna putih. Namun, kita dapat mengubah warna bakground tersebut, baik secara keseluruhan maupun hanya elemet tertentu, property yang digunakan yaitu “background-color” / “background”.
Properti keseluruhan dalam selector :
Background : …..warna… ;
Atau
Background-color : ….warna…. ;
Jika kita sisipkan dalam tag <style> dengan selector “body” warna merah, kurang lebih seperti berikut ini :
<style type=”text/css”>
background : red;
</style>
Oke, mari kita pasangkan atau sisipkan pada markup html. Disini kita akan melakukan perubahan, dimana yang akan kita design yaitu bagian body (background inti), dan bagian paragraf. Silahkan ketik kode berikut ini :
<html>
<head>
<style type="text/css">
body {background:#9f9bf3;}
p {background:red}
</style>
</head>
<body>
untuk membuat background berwarna cukup tambahkan background:dan warna yang dipilih;<p><br/><br/>ini adalah tutorial selanjutnya yaitu dengan menambahkan background. kita menggunakan kode background maka ini akan berubah warna, bagaimana jika kita gunakan warna merah sebagai latar belakngnya.<br/><br/><br/></p><br/>informasi selanjutnya saya akan bahas di tutorial lainnya<br/>
</body>
</html>
Silahkan simpan kode tersebut dengan nama.html lalu buka dengan aplikasi browser. Kurang lebih tampilannnya akan seperti berikut ini :
Penjelasan kode diatas :
- <html> dan </html> merupakan kode pembungkus dari html
- <head> dengan </head> merupakan kode untuk menyimpan judul, meta description, script javascript, iklan, link rel, dan sebagainya.
- <style> dengan </style> untuk mendefinisikan, bahwa apa yang di dalamnya merupakan design untuk halaman.
- body dan p dalam tag <style> merupakan selector, yang menunjukan bahwa bagian inilah yang akan di percantik.
- Background : ..value (red , #9f9bf3)…. merupakan inti dari pembahasan kita hari ini, yaitu memberikan warna pada latar belakang.
- <body> merupakan tag yang akan menampilkan isi ke user. Tag ini akan diakhiri dengan tag </body>
- <p> yang berarti paragraf, mendefinisikan apa yang didalmnya adalah satu paragraf.
- <br/> garis baru
Materi selesai.. mari membaca lagi
