CSS Class - Belajar CSS #4

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 HTML
Contoh 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 Tertentu
Saya 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