Penggunaan ID dan CLASS

Atribut ID dan CLASS pada CSS

Dilihat dari fungsinya, dua atribut CSS tersebut hampir sama yaitu untuk mengelompokan suatu elemen HTML sehingga dapat menyederhanakan penggunaan kode HTML terutama kode-kode HTML yang sering diulang-ulang. ID (Identification) diawali dengan tanda pagar (#), CLASS diawali dengan tanda titik(.). Kedua atribut CSS tersebut nantinya akan dipanggil pada kode HTML seperti ini : <div id="nama identifikasi"> ......</div> dan <div class="nama klasifkasi">......</div>.

Nama atribut ID dan CLASS terserah pembuatnya tetapi sebaiknya disesuaikan dengan nama kelompok yang terkait untuk mempermudah pengeditan. Perbedaan antara atribut ID dan CLASS pada CSS adalah pada tingkat penggunaannya, ID sebaiknya digunakan sebagai identitas yang unique, seperti Logo, Header, Footer, Left Sidebar, dan Right Sidebar sedangkan CLASS digunakan untuk menandai atribut yang lebih sepesifik seperti ketebalan border (garis pinggir), kode warna, paragraph, jenis font, dan ukuran font.

CLASS dapat digunakan untuk mengatur tampilan atau atribut dari suatu kelompok data HTML baik yang memiliki ID tertentu atau tidak, sedangkai ID untuk memberikan identifikasi atau atribut pada kelompok data atau elemen HTML yang lebih besar. Dengan demikian menurut para webmaster, penggunanaan atribut CLASS bisa berulang-ulang, hal ini sangat mudah dipahami mengingat setiap data tidak mungkin memiliki banyak ID. Jadi untuk membedakan dengan data-data yang mempunyai ID yang sama, harus menggunaan atribut CLASS.

Contoh sederhana, sebuah perpustakaan yang memiliki beragam buku dan akan mengelompokan buku-buku tersebut kedalam kelompok besar berdasarkan "ARTIKEL" yang salah satunya "Artikel Pertanian" selanjutnya diberi nama "ID Pertanian", pada kategori "Artikel Pertanian" tersebut terdapat sub artikel diantaranya wortel, kubis, kentang, sosin, tomat, dan lain-lain, selanjutkan diberi nama CLASS berdasarkan nama sayuran tersebut (Class Kubis, Class Wortel, Class Kentang dan seterusnya).

Penggunaan CLASS sendiri tidak harus berdampingan atau berada di dalam satu ID. Atribut CLASS bisa juga digunakan pada beberapa ID yang berbeda. Jadi nama CLASS yang berdasarkan nama sayuran tersebut bisa saja merupakan bagian dari kelompok besar lainnya misalnya "ID Perdagangan" atau "ID Pasar", dan sebagainya, namun tetap fungsi dari kedua attribut tersebut adalah untuk mengelompokan suatu data atau elemen HTML agar lebih tersusun.

Lebih jelasnya silahkan perhatikan contoh penggunaan ID dan CLASS pada CSS berikut. Terlebih dahulu kode CSS ditulis diantara <head> dan </head> yang diawali dengan <style> dan diakhiri dengan </style>. Penggunaan ID dan CLASS selanjutnya disisipkan pada kode HTML di antara <body> dan </body>.

<html>
<head>
<title>BELAJAR CSS DASAR</title>
<style>
     #kotak {
          width : 300px;
          height : 80px;
          background-color : #ffffcc;
          padding : 5px;
          margin-top : 10px;
          border : 1px #999999 solid;
          }
     #kotak-1 {
          width : 300px;
          height : 80px;
          background-color : #00ff99;
          padding : 5px;
          margin-top : 10px;
          border : 1px #0000cc dashed;
          }
     .kelas-1 {
          font-family : Arial, Helvetica, sans-serif;
          color : #ff0000;
          font-size : 12px;
          text-align : left;
          text-decoration : underline;
          line-height : 3px;
          }
     .kelas-2 {
          font-family : "Times New Roman", Times, serif;
          color:#0000ff;
          font-size : 14px;
          text-align : right;
          text-decoration : none;
          font-weight : bold;
          line-height : 3px;
          }
     .kelas-3 {
          font-family : Verdana, Arial, Helvetica, sans-serif;
          color : #0000;
          font-size : 13px;
          text-align : center;
          text-decoration : none;
          line-height : 3px;
          }
</style>
</head>
<body>
   ...........
       ...........
       ...........
</body>
</html>

Pada script di atas saya membuat contoh 2 buah ID dan 3 buah CLASS yang berbeda yaitu ID kotak, ID kotak-1, kelas-1, kelas-2, dan kelas-3. Perhatikan contoh-contoh penulisan untuk memanfaatkan ID dan CLASS yang telah dibuat. Kode tersebut harus ditulis diantara <body> dan </body>.

Contoh 1:

<div id="kotak">
     <p class="kelas-1">Tulisan ini terletak di dalam ID Kotak</p>
     <p class="kelas-1">dengan lebar kotak 300px dan tinggi 80px</p>
     <p class="kelas-1">warna background kuning dan</p>
     <p class="kelas-1">menggunakan atribut class-1</p>
     <br />
</div>

Hasilnya :

Tulisan ini terletak di dalam ID Kotak