Ini
serial belajar css yang ke 4. Seperti biasa kita akan membahas css mulai dari dasar. Kali ini kita membahas
Class Selector, yang mmungkinkan Anda memberikan gaya yang sama untuk banyak bagian HTML. Jadi ini akan digunakan beberapa kali.
Penulisannya...Penulisan di awali dengan tanda titik (.)
.namaclass {property:value;}
Contohnya adalah seperti berikut ini:
.teksbirutebal {
color: blue;
font-size: large;
font-weight: bold;
}
- Penulisan dimulai dengan tanda titik
- Sebaiknya
namaclass diganti sesuaidengan propertinya. Misalkan Anda memberikan value teks berwarna biru dan bergaya tebal, maka pilihlah nama
teksbirutebal agar lebih tertata dan tidak membingungkan nantinya.
Penerapannya...Misalkan ada tulisan:
Jangan lupa kunjungi Mas Doyok, karena blog tersebut update setiap hari.
Kemudian kita ingin mengubah kata mas doyok bergaya teks tebal dan berwarna biru. Sementara, kata-kata yang lain dibiarkan tetap, seperti berikut:
Jangan lupa kunjungi Mas Doyok, karena blog tersebut update setiap hari.
Penulis kodenya menjadi:
Jangan lupa kunjungi <span class="teksbirutebal">Mas Doyok</span>, karena blog tersebut update setiap hari. Pada kode di atas, kata Mas Doyok di beri class
teksbirutebal, artinya kata tersebut akan di atur sesuai dengan property dan value css class teksbirutebal
seperti yang tadi dituliskan di awal. Jika CSS nya diganti, maka otomatis tulisan Mas Doyok tersebut akan ikut berganti style.
Menempelkan Class Pada Tag HTMLContoh tag HTML adalah, p, h1, h2, h3, h4 dan seterusnya. Misalkan ada css seperti berikut ini:
h4 {
font-size: large;
color: #333333;
}
Artinya setiap elemen yang masuk pada tag heading h4, akan diberi warna hijau (color: #333333) dan model huruf besar (font-size:large). Lalu misalnya kita menggunakan tag headings untuk banyak bagian. Misalkan saja untuk judul gadget pada sidebar kiri dan sidebar kanan. Kedua judul sidebar tersebut sama-sama menggunakan tag headings h4. Kemudian kita menginginkan style judul sidebar kiri dan sidebar kanan berbeda. Maka kita tempelkan class pada tag h4. Rumusnya:
taghtml.namaclass {property:value;}
Maka, untuk kasus di atas, kode css nya menjadi:
h4 {
font-size: large;
color: #333333;
}
h4.sidebarkiri {
text-align: left;
}
h4.sidebarkanan {
text-align: center;
}
Perbedaanya hanya terdapat pada
text-align alias perataan. Anda bisa menambahkan lagi style yang berbeda pada masing-masing class. Kali ini kita hanya mengambil perbedaan pada
text-align:left dan
text-align:center.
Maka penerapannya, misal adalah:
<h4 class='sidebarkiri'>Judul Gadget</h4>artinya: Judul Gadget akan dicetak hijau dan besar (sesuai h4) dan rata kiri (sesuai class sidebar kiri)
<h4 class='sidebarkanan'>Judul Gadget</h4> artinya: Judul Gadget akan dicetak hijau dan besar (sesuai h4) dan rata tengah (sesuai class sidebar kanan)
Contoh Penggunaan Class Untuk Link TertentuSaya mengambil contoh penerapan class pada kasus nyata untuk membuat link yang berbeda. Pada umumnya, pengaturan warna saat link disorot di atur oleh CSS:
a:hover {text-decoration: underline;}Nah Anda bisa menambahkan kode css seperti berikut ini, di bawah css link umum tersebut
a.linkspecial:hover {text-decoration: underline;color: #333333;}Sehingga penerapannya pada kode html Link:
<a href="http://www.masdoyok.co.cc" class="linkspecial">Blog Tips Episode 2</a>Yang berwarna merah adalah tambahannya... Dengan begitu, saat disorot link tersebut akan berwarna sesuai css class
linkspecial dan bukan css link pada umumnya.
Lalu, Fungsi Utama Penggunaan Class?Lalu apa sebenarnya fungsi utama penggunaan class? Seperti dikatakan di awal ini digunakan untuk pemberian
style yang sama untuk banyak bagian. Suatu saat, misal karena perubahan background template, Anda diharuskan merubah beberapa bagian template agar warnanya cocok. Anda akan sangat kerepotan jika harus edit beberapa bagian yang ber
style sama satu persatu.
Nah, jika beberapa bagian itu telah Anda beri
class yang sama, maka ketika Anda ingin merubah banyak bagian, Anda cukup mengganti
value pada kode css tanpa harus ke bagian HTML.
Selain itu Class digunakan untuk memberikan style yang berbeda dari ummnya, seperti contoh pada penerapan link di atas. Semoga bermanfaat....
Seri Sebelumnya:-
Pengenalan CSS-
Berbagai Metode Penggunaan CSS-
Syntax CSS
Read More......
