Penggunaan ID dan CLASS dal

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 : ...... dan .......

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 dan yang diawali dengan
dan diakhiri dengan . Penggunaan ID dan CLASS selanjutnya disisipkan pada kode

HTML di antara dan .



BELAJAR CSS DASAR

#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;
}



...........
...........
...........



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

dan .

Contoh 1:


Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px
warna background kuning dan
menggunakan atribut class-1



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:

Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px
warna background kuning dan
menggunakan atribut class-2



Hasilnya :

Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px
warna background kuning dan
menggunakan atribut class-2

Contoh 3:


Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px

warna background kuning dan
menggunakan atribut class-3



Hasilnya :
Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px
warna background kuning dan
menggunakan atribut class-3

Contoh 4:


Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px
warna background kuning dan
dengan atribut class-1,class-2, class-3

Hasilnya :

Tulisan ini terletak di dalam ID Kotak
dengan lebar kotak 300px dan tinggi 80px
warna background kuning dan
dengan atribut class-1,class-2, class-3

Contoh 5:


Tulisan ini terletak di dalam ID Kotak-1
dengan lebar kotak 300px dan tinggi 80px
warna background hijau muda dan
menggunakan atribut class-3



Hasilnya :
Tulisan ini terletak di dalam ID Kotak-1

dengan lebar kotak 300px dan tinggi 80px
warna background hijau muda dan
menggunakan atribut class-3