Jika sebelumnya kita sudah membuat database dan halaman utama admin, maka sekarang saatnya kita membuat desain halaman utama untuk administrator menggunakan bahasa pemrograman CSS (Cascading style sheet) yaitu script yang digunakan untuk mengatur desain pada sebuah website. Mengapa saya tidak membuat desain website menggunakan full HTML? karna walaupun HTML Mempunyai kemampuan untuk mengatur tampilan website, namun kemampuannya sangat terbatas.
Fungsi CSS adalah memberikan pengaturan yang lebih lengkap agar struktur website yang dibuat dengan HTML terlihat lebih rapih dan indah.
Disini saya hanya akan memberikan script CSS beserta penjelasan dari setiap elemen yang saya gunakan, Jika kalian belum membaca artikel sebelumnya bisa kalian buka di bawah ini
Silahkan kalian buat file CSS tersebut lalu tuliskan script CSS berikut di dalamnya.
body{
background : #000;
font : 12px arial;
}
#container{
width : 960px;
margin : 0 auto;
}
#header{
background : url('img/header.jpg') no-repeat;
height : 100px;
}
#content{
background : #fff;
min-height : 400px;
padding : 20px;
}
#footer{
background : #364a88;
height : 50px;
}
#footer p{
color : #ccc;
margin : 0;
padding-top : 15px;
text-align : center;
}
background : #000;
font : 12px arial;
}
#container{
width : 960px;
margin : 0 auto;
}
#header{
background : url('img/header.jpg') no-repeat;
height : 100px;
}
#content{
background : #fff;
min-height : 400px;
padding : 20px;
}
#footer{
background : #364a88;
height : 50px;
}
#footer p{
color : #ccc;
margin : 0;
padding-top : 15px;
text-align : center;
}
Penjelasan :
body merupakan selector untuk memilih tag <body> yang kemudian akan diatur desainnya. sedangkan kata yang diawali dengan # seperti #container, #menu, #content, dan #footer adalah selector untuk memilih tag <div> yang memiliki atribut id dengan nilai yang sama dengan kata kata tersebut. Adapun selector yang ditulis dengan gabungan keduanya seperti #footer p, berati memilih tag <p> yang berada di dalam tag <div> dengan id "footer"
skrip yang terletak antara tanda { dan } adalah properti CSS yang dipakai untuk mengatur desain dari selector yang dipilih. setiap properti, dan nilainya dipisahkan dengan tanda titik dua (:), dan diakhiri dengan titik koma (;), contohnya "background: #000;"
properti background digunakan untuk mengatur warna background. Script url('img/header.jpg') menunjukan letak gambar pada folder img dengan nama header.jpg, sedangkan no-repeat digunakan untuk membuat gambar tidak ditampilkan berulang.
properti font digunakan untuk mengatur ukuran dan jenis font untuk mengatur font secara keseluruhan biasanya ditulis pada selector body.
properti width digunakan untuk mengatur lebar dari elemen yang dipilih
properti height digunakan untuk mengatur tinggi elemen
properti margin digunakan untuk mengatur jarak elemen dengan elemen lain diluarnya.
properti min-height digunakan untuk mengatur tinggi maksimal suatu elemen.
properti padding digunakan untuk mengatur jarak tepi elemen terpilih dengan elemen yang ada didalamnya atau dapat dikatakan kebalikan dari properti margin.
properti color digunakan untuk mengatur warna teks yang ada didalamnya
properti text-align digunakan untuk meratakan text. jika disini center, maka text menjadi rata tengah.
skrip yang terletak antara tanda { dan } adalah properti CSS yang dipakai untuk mengatur desain dari selector yang dipilih. setiap properti, dan nilainya dipisahkan dengan tanda titik dua (:), dan diakhiri dengan titik koma (;), contohnya "background: #000;"
properti background digunakan untuk mengatur warna background. Script url('img/header.jpg') menunjukan letak gambar pada folder img dengan nama header.jpg, sedangkan no-repeat digunakan untuk membuat gambar tidak ditampilkan berulang.
properti font digunakan untuk mengatur ukuran dan jenis font untuk mengatur font secara keseluruhan biasanya ditulis pada selector body.
properti width digunakan untuk mengatur lebar dari elemen yang dipilih
properti height digunakan untuk mengatur tinggi elemen
properti margin digunakan untuk mengatur jarak elemen dengan elemen lain diluarnya.
properti min-height digunakan untuk mengatur tinggi maksimal suatu elemen.
properti padding digunakan untuk mengatur jarak tepi elemen terpilih dengan elemen yang ada didalamnya atau dapat dikatakan kebalikan dari properti margin.
properti color digunakan untuk mengatur warna teks yang ada didalamnya
properti text-align digunakan untuk meratakan text. jika disini center, maka text menjadi rata tengah.