Penggunaan ID dan CLASS dal

(1)

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

(2)

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>

(3)

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>

(4)

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:

<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

dengan lebar kotak 300px dan tinggi 80px

warna background kuning dan

menggunakan atribut class-1

Contoh 2:

<br />

</div>

(5)

Contoh 3:

<br />

</div>

Hasilnya :

Contoh 4:

<p class="kelas-3">dengan atribut class-1,class-2, class-3</p>

<br />

</div>

(6)

dengan atribut class-1,class-2, class-3

Contoh 5:

<p class="kelas-3">Tulisan ini terletak di dalam ID Kotak-1</p>

<p class="kelas-3">warna background hijau muda dan</p>

<br />

</div>

Hasilnya :

Tulisan ini terletak di dalam ID Kotak-1

warna background hijau muda dan