Q-Learning: Contoh CSS Dasar

Pada pembahasan kali ini saya akan menyampaikan beberapa contoh mengenai penggunaan CSS. Seperti sudah kita ketahui sebelumnya, bahwa CSS adalah kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan sehingga mampu mengantisipasi konflik gaya yang ada. Untuk lebih jelasnya mengenai definisi dan penggunaan CSS, anda bisa googling atau cari aja dari buku-buku komputer.

Nah, kalau begitu langsung saja kita coba praktek dari penggunaan CSS tersebut. Kali ini saya buat CSS tanpa menggunaka link image atau penggunaan file eksternal, melainkan murni CSS dengan pengkodean warna dan border.

CSS

#button {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

HTML

<div id="button">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">KiplukNews</a></li>
<li><a href="#">KiplukNet</a></li>
<li><a href="#">KiplukFood</a></li>
<li><a href="#">KiplukHot</a></li>
<li><a href="#">KiplukMovie</a></li>
<li><a href="#">KiplukSport</a></li>
</ul>
</div>