Cara Membuat Kode id pada CSS

Apa itu kode id pada CSS? Apa sih kelebihannya dibanding kode class? Huruf awal pada nama kode id di CSS tidak seperti kode class yang diawali dengan titik ( . ), tetapi dengan tanda pagar ( # ). Meskipun fungsinya sama, yaitu untuk mempercantik tapi kode id mempunyai kelebihan. Kelebihannya bila kita memasang kode id di bagian atas situs, misalkan dengan nama header. Dan jika ketika kita sedang berada di bagian bawah situs lalu mengklik link yang misalkan kodenya

<a href="#header">top</a>

kita akan langsung ke bagian atas situs tanpa harus menggulir keatas secara manual. Lalu, bagaimana kodenya di CSS? Berikut contohnya.

#namanya {
text-align: center;
font-weight: bold;
background: #3399ff;
margin: 1px 2px 1px 2px;
padding: 2px 1px 2px 1px;
}

Kode tersebut bisa ditambah dengan kode lain. Kode id juga bisa dibuat untuk jalan cepat ke menu navigasi dan sebagainya. Misalkan navigasinya diberi kode

<div id="navigasi">Navigasi</div>

Dan di CSSnya dibuat kode id yang bernama #navigasi. Serta yang terakhir adalah memasang kode seperti berikut dibagian yang mau diberi jalur untuk ke navigasi tersebut, misalkan di bagian header (atas situs).

<a href="#navigasi">Navigasi</a>

Maka posisi kursor akan berada di dekat bahkan di menu navigasi tanpa harus menggulir dan menunggu loading (kadang) setelah mengklik link tadi. Asalkan kode tersebut masih dalam satu halaman. Tapi, jika kita sedang berada di situs lain, lalu memasukkan alamat yang akan dituju di address bar seperti ini

http://namasitus.com/#navigasi

Kita akan langsung berada di menu navigasi situs tersebut tanpa harus menggulir. Syaratnya situs tersebut memasang kode id dengan nama #navigasi di CSS dan link dengan URL #navigasi. Menurutku kode tersebut memudahkan untuk mencapai menu tertentu disuatu situs bila kita sudah mengetahui kalau ada kode id di situs tersebut. Setujukah anda?

Tweet