Pengenalan CSS

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kurang lebih pengertiannya CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Berikut contoh penggunaan css :

  

style.css :

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #380a62;
font-size:14px;
}
#kotak {
width: 920px;
margin:auto;
}
#kotak #logo {
background-image: url(../images/logo.jpg);
height: 60px;
width: 920px;
}
.search {
padding-left:680px;
padding-top:33px;
color:#ffffff;
font-size:12px;
}
#kotak #header {
background-image: url(../images/header.jpg);
float: left;
height: 252px;
width: 920px;
margin-bottom:18px;
}
#kotak #content {
background-image: url(../images/background.jpg);
float: left;
width: 902px;
padding-right: 10px;
padding-left: 8px;
}
#kotak #content #kiri {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#kotak #content #tengah {
float: left;
width: 502px;
}
#kotak #content #kanan {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#kotak #batas {
clear: both;
}
#kotak #footer {
height: 46px;
width: 920px;
margin-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: center;
}
#kotak #content #tengah #pages {
margin-top: -8px;
text-align: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
border: 1px solid #B6B4B4;
}
#kotak #content #tengah #pages #navteng {
background-color: #FB9B23;
height: 23px;
width:479px;
text-align: left;
color: #FFFFFF;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:20px;
padding-top:10px;
margin-top:-11px;
margin-left:-10px;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #B6B4B4;
}
#nav {
background-color: #DEBBFB;
height: 20px;
text-align: center;
color: #780ed0;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding:6px 2px 0px 1px;
border: 1px solid #B6B4B4;
border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
}
#pages {
border: 1px solid #B6B4B4;
margin-bottom: 5px;
padding-left:8px;
padding-top:10px;
padding-bottom:10px;
padding-right:2px;
border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
}
.isi{
font-size:11px;
}
#kotak #headcont {
background-image: url(../images/headcont.jpg);
float: left;
height: 9px;
width: 920px;
}
#kotak #footcont {
background-image: url(../images/footcont.jpg);
float: left;
height: 7px;
width: 920px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 30px;
width: 901px;
top: 220px;
position: relative;
left: 8px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li a {
text-decoration: none;
float: left;
display: block;
padding: 8px;
color: #FFFFFF;
}
#menu ul li a:hover {
color:#F9951D;
}