2013-04-03

Penerapan / Pemanggilan CSS div Class vs div ID

Seperti yang sedikit pernah saya bahas di halaman Syntaxs CSS, baik classs ataupun ID yang ditetapkan pengguna untuk selector.

Penggunaan / Penerapan Class
Class ditentukan dengan memasukkan periode (.) tanda titik Sebelum nama selector/pemilih. Syntaxs untuk mendeklarasikan selector Class, dan sebagai contoh dibawah ini :

.[nama Class] {  
properti: value;  
...
}
Misalnya,
.contohnavbar { 
color: blue;
font-size:24px;
font-weight:bold;
border:1px solid silver;
padding:10px;
}

Agar fungsi dari Class dapat digunakan dan bisa berfungsi, Class harus dipanggil dari THML area, dalam pemanggilan Class ini nama class harus benar-benar sama dengan karakter penulisan Class yang dibuat, apabila berbeda maka fungsi dari class tidak akan berjalan, perhatikan teks warna merah contohnavbar maka berikut contoh pemanggilan Class CSS ke HTML:

<div class="contohnavbar"> Ini adalah contoh menggunakan selector Class. </div>

Maka hasilnya sebagai berikut :

Ini adalah contoh menggunakan selector Class.


Penggunaan / Penerapan ID
ID ditentukan oleh tanda pagar (#) sebelum nama selector. Syntaxs untuk mendeklarasikan selector ID adalah sebagai berikut:

.[nama Class] {  
properti: value;  
...
}
Misalnya,
#footer-contoh {
color: blue;
font-size:24px;
font-weight:bold;
border:1px solid silver;
padding:10px;
}

Untuk memanggil nama ID diatas dapat digunakan dengan kode HTML berikut
<div id="footer-contoh"> Ini adalah contoh menggunakan ID selector. </div>
Maka hasilnya sebagai berikut


Diatas merupakan contoh sederhana atau contoh yang simple tentang penggunaan Class CSS dan juga ID CSS.

Devinisi Class vs ID
Perbedaan antar Class dengan ID yaitu.

ID : ID hanya boleh digunakan dalam satu halaman saja dan tidak boleh dipanggil / digunakan ulang dalam satu halaman untuk element yang lain.  misalnya sebuah nama ID #sidebar-wrapper maka ID #sidebar-wrapper tidak boleh digunakan lagi didalam satu halaman. kalaupun bisa halaman website/blog anda akan dianggap tidak valid HTML.

Class : Berbeda dengan ID, Class css dapat digunakan untuk mengatur banyak element html sebanyak mungkin walaupun dalam satu halaman.

Dapatkan artikel terbaru seperti Penerapan / Pemanggilan CSS div Class vs div ID langsung ke Email kamu..!!!