Hai sobat Techno Fivers…
Untuk melengkapi materi yang tidak sempat diberikan mengenai HTML dan CSS, sedangkan materi harus segera berganti lagi, maka Admin harap artikel ini dapat membantu melengkali materi yang kurang itu.
Saya akan memperkenalkan bagian penting dari CSS. Ya, penting sekali, sebuah website tidak akan terlihat rapi dan terstruktur serta efisien dan efektif dalam pembuatannya, tanpa bagian yang akan kita bahas ini.
Selector
Pertama, kita akan bahas apa itu selector. Secara bahasa, selector berasal dari kata select, artinya memilih. Misal, ketika kamu sedang menggunakan aplikasi pengolah kata “Mr. Word”, kamu ingin memindahkan gambar yang ada di halaman 1 ke halaman 2. Tentu kamu harus memilih (selecting) gambar itu dulu. Dalam hal ini, cara kamu memilih gambar itu dengan cara mengarahkan kursor ke gambar, lalu klik kiri mouse.
Dalam HTML, untuk memilih suatu elemen dan mengaturnya sesuai dengan keinginan kita, kita tidak bisa mengaturnya seperti kita mengatur gambar pada Mr. Word (kecuali dengan aplikasi tertentu). Oleh sebab itu, ada istilah Selector.
Coba perhatikan kode di bawah, namun ada baiknya jika kamu sudah mengetahui Metode Meletakan CSS.
<html>
<head>
<style>
a {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
body {
padding: 20px;
background: #ffa;
border: 2px solid red;
}
p {
font-weight: bold;
color: #f8f;
}
</style>
</head>
<body>
<a href=”#”>Tulisan yang diatur selektor a</a>
<p>Tulisan yang diatur selektor p</p>
</body>
</html>
Coba lihat teks yang berwarna merah. Itu yang dinamakan Selector. Teks yang berwarna ungu, itulah tag-tag yang diatur oleh selektornya masing-masing. Dari melihat contoh saja, apa kamu sudah paham tentang selektor?
ID dan Class
Nah, kamu sudah mengenal apa itu selektor. Namun, yang baru saja dicontohkan, itu adalah selektor berdasarkan tag-tag yang ada di dalam HTML. Sehingga, satu selektor akan berlaku menyeluruh. Misal kamu memberi aturan pada selektor p (untuk tag p), maka setiap elemen yang ada di dalam tag <p> akan mengikuti aturan dari selektor tadi. Jadi, misal kamu ingin membuat dua kelompok tag <p>, misalnya kelompok tag <p> pertama berwarna kuning, dan kelompok tag <p> kedua berwarna merah, kamu tidak bisa melakukannya.
Nah, mari berkenalan dengan ID dan class. Mari lihat contoh kode berikut:
<html>
<head>
<style>
#unik {
width: 200px;
height: 200px;
background: #eee;
margin: 10px;
padding: 10px;
}
.kelas1 {
color: red;
font-size: 11px;
}
.kelas2 {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
kelas1″>Teks 1
kelas2″>Teks 2
kelas1″>Teks 1
kelas2″>Teks 2
</body>
</html>
Selektor yang diawali tanda pagar (“#”) disebut ID dan selektor yang diawali tanda titik (“.”) disebut class. Jika kamu coba mempraktekan kode diatas, “Teks 1” dan “Teks 2” yang merupakan elemen dari tag <p> yang berbeda kelas akan berbeda warnanya. Nah, dengan begini kamu bisa membuat dua kelompok tag <p> yang berbeda sifatnya, yang satu warna biru, yang lain warna merah. Dengan ID dan Class, selektor-selektor yang akan kamu pakai pun bisa kamu beri nama sesuka hati.
Lalu, apa bedanya ID dengan Class?
Menurut beberapa referensi yang Admin baca, ID bersifat unik, oleh sebab itu hanya bisa digunakan satu kali. Sedangkan, Class bisa digunakan berkali-kali.
Nah, lalu Admin pun bertanya-tanya, apa yang dimaksud hanya bisa digunakan satu kali. Satu kali dalam satu halaman web atau satu kali dalam arti suatu ID tidak boleh menjadi elemen dari tag yang ber-ID sama.
Eksperimen
Untuk mengetahui lebih lanjut. Admin melakukan pembuktikan apakah pernyataan bahwa ID hanya dapat digunakan satu kali itu benar.
Source:
<html>
<head>
<style>
#unik {
width: 200px;
height: 200px;
background: #eee;
margin: 10px;
padding: 10px;
}
.kelas1 {
color: red;
font-size: 11px;
}
.kelas2 {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
kelas1″>Teks 1
kelas2″>Teks 2
kelas1″>Teks 1
kelas2″>Teks 2
kelas1″>Teks 1
kelas2″>Teks 2
kelas1″>Teks 1
kelas2″>Teks 2
</body>
</html>
Output:
Terbukti bahwa satu ID bisa digunakan dua kali dalam satu halaman, seperti percobaan diatas, ID “unik” berfungsi dengan baik ketika digunakan lebih dari sekali.
Pertanyaan berikutnya, apakah suatu ID bisa menjadi elemen dari tag yang ber-ID sama?
Source:
<html>
<head>
<style>
#unik {
width: 75%;
height: 75%;
background: #eee;
margin: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
BISA TIDAK?
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Nah, ternyata ID “unik” bisa menjadi elemen di dalam tag <div> yang ber-ID “unik” juga. Dua pertanyaan sudah terjawab, dan jawaban keduanya adalah “BISA!”. Jadi, pernyataan bahwa ID hanya bisa dipakai satu kali, menurut percobaan ini, adalah salah.
Kesimpulan
Nah, sekarang bagaimana menyimpulkannya. Apa perbedaan fungsi ID dan Class?
Menurut eksperimen tadi, tidak ada bedanya. Tapi, kita bisa tetap menganggap ID itu unik. Selektor yang memiliki nama tentu akan lebih mudah dikenal bukan? ID bisa digunakan untuk memberi nama suatu selektor. Misal, untuk membuat header, content, atau sidebar dari suatu web, kamu bisa menggunakan selektor ID untuk mengaturnya. Sedangkan, Class bisa kamu gunakan untuk mengatur elemen-elemen yang umum.
Sekian…
~ Semangat!
ICT SMAN 5 Bekasi Blog! 