Class & Id

Nah sekarang saya akan coba menjelaskan cara menggunakan Class dan Id. Penggunaan class dan id ini sangat berguna sekali, apabila kita ingin mengatur tampilan dari suatu tag HTML. Penggunaan class dan id ini pasti akan sering dipakai.
Nama untuk class selalu diawali dengan tanda titik (.), sedangkan untuk id selalu diawali dengan tanda pagar (#).
Untuk lebih memahami penggunaan class dan id, lihat source code berikut ini:

<html>
<head>
   <title>Class dan Id</title>
   <style type="text/css">
   #top {
      background-color: #ccc;
      padding: 10px;
   }
   .test {
      color: blue;
      font-weight: bold;
   }
   #beda {
      color: red;
      font-style: italic;
   }
   </style>
</head>
<body>
<div id="top">
   <p>Mencoba Class dan Id</p>
   <p class="test">Ini adalah contoh penerapan dari class di dalam css</p>
   <p class="test">Ini juga adalah contoh penerapan dari class</p>
   <p id="beda">Ini menggunakan id</p>
</div>
</body>
</html>


Lalu save source code di atas dengan nama test-class-id.html dan lihat apa hasilnya.
Catatan:
Sebuah ID hanya dapat digunakan oleh satu elemen itu saja, sedangkan untuk class dapat digunakan pada beberapa elemen. Lihat source code ini:

<p class="test">Ini adalah contoh penerapan dari class di dalam css</p>
<p class="test">Ini juga adalah contoh penerapan dari class</p>

Maka tampilan dari source code di atas dua-duanya akan tampil dengan tulisan bold dan dengan warna biru. Dengan menggunakan class inilah kita akan sangat terbantu sekali apabila ingin mengatur beberapa elemen dengan tampilan yang sama, seperti di atas, langsung mengatur dua tag p dengan warna biru dan tulisan tebal.
Berbeda lagi dengan source code ini:

<p id="beda">Ini menggunakan id</p>

Dengan source code di atas, kita hanya bisa mengatur tampilan dari elemen p dengan id beda saja. Ingat untuk id ini hanya bisa digunakan oleh satu elemen HTML saja. Tidak bisa digunakan seperti contoh class di atas yang bisa digunakan untuk mengatur tampilan beberapa elemen HTML dengan coding css yang sama.
Gampang kan? Silahkan coba-coba sendiri ya.. 😎

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s