Belajar CSS

posted by Dini Shanti on Mar 16

Kode css ini akan memformat blok menu link dengan background dan warna font yang berubah ketika kursor mouse berada di atasnya.

Contoh hasil:
Taruh kursor mouse anda di link-link di bawah ini.

Kode css yang digunakan:

.menusimple a {
display: block;
width: 100px;
height: 20px;
margin-top:-20px;
color: #000000;
background: #e9e9e9;
padding:6px;
text-decoration:none;
}

.menusimple a:hover {
display: block;
color: #ffffff;
background: #000000;

}

Penggunaan Kode:

<div class=”menusimple”>
tulis link anda di sini
</div>

Penjelasan:

• Link-link menu di letakkan di dalam div dengan nama class ‘menusimple’, hal ini memudahkan anda untuk menentukan format menu link berbeda-beda dalam satu halaman web.
• Ada 2 kode css yaitu untuk a dan a:hover, kode css untuk a:hover adalah kode yang akan digunakan ketika kursor mouse berada di atas link.
• Dengan menggunakan kode display:block , panjang dan lebar link dapat ditentukan, maka jika menggunakan warna background yang mencolok, akan terlihat seperti persegi empat.
• Kode width dan height adalah untuk menentukan panjang dan lebar kotak disekeliling link
• Kode margin-top:-20px; diperlukan agar tidak ada jarak antara link yang satu dengan link lainnya
• Color dan background adalah kode warna dari warna font dan latar belakang persegi empat
• Kode padding:6px; adalah untuk menentukan jarang tulisan dari kotak persegiempatnya
• Kode text-decoration:none; digunakan agar tidak ada garis bawah pada link

Silahkan anda coba merubah nilai dari kode-kode di atas, coba ubah warna nya… Tentunya anda pun dapat dengan mudah menambahkan elemen lain seperti border dan background image, have fun!

note: kode ini sudah di test dan berjalan baik di firefox dan IE6.