Class dan id CSS

Class CSS adalah salah satu feature yang paling unik dari CSS. Karena dengan code class CSS kamu bisa membuat sebuah element HTML memiliki tampilan yang bermacam-macam.

Misalkan saja kamu ingin sebuah font berwarna putih dan berukuran besar tetapi di tempat yang lain kamu ingin warna font menjadi biru dan berukuran kecil.

Syntax class CSS

Untuk mengetahui bagaimana syntax dari class CSS kamu bisa melihat contoh di bawah.

Code CSS class:

p.first{ color: blue; }
p.second{ color: red; }

Code HTML class:

<html>
<body>
<p>Paragraph ini menggunakan tampilan normal.</p>
<p class="first">Paragraph ini menggunakan code CSS p.first!</p>
<p class="second">Paragraph ini menggunakan code CSS p.second!</p>
</body>
</html>

Hasil code HTML dan class:

Paragraph ini menggunakan tampilan normal.

Paragraph ini menggunakan code CSS p.first!

Paragraph ini menggunakan code CSS p.second!

Perhatikan pada code CSS, pertama ada element HTML [p] diikuti dengan tanda titik [.] lalu diikuti dengan nama class [first].

Pada code HTML, kita menambahkan code class [class="first"] di element HTML yang ingin kita ganti stylenya.

Catatan: jangan menggunakan angka untuk character pertama dari nama class.

Default CSS vs class CSS

Setiap element HTML bisa kamu kasih class CSS. Tetapi bagaimana jika kita sudah memberi default value CSS untuk sebuah element HTML?

Misalkan saja kamu sudah menetapkan value dari paragraph tag dengan code CSS external, lalu kamu memberi code class CSS ke dalam sebuah paragraph tag, lalu code manakah yang dipakai dan akan ditampilkan oleh web browser? Apakah code CSS external atau code class CSS?

Saat kasus diatas terjadi maka code class CSS akan menimpa code CSS default yang artinya code class CSS yang akan dipakai oleh web browser.

Supaya lebih mudah dimengerti, bayangkan saja kamu menggunakan CSS external untuk mengatur keseluruhan tampilan element HTML secara standar, kemudian kamu bisa menggunakan class CSS untuk mengganti tampilan beberapa element HTML yang kamu inginkan. Lihat contoh dibawah untuk kasus ini.

Code CSS class:

p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }

Code HTML class:

<html>
<body>
<p>Paragraph ini menggunakan tampilan umum.</p>
<p class="test1">Paragraph ini menggunakan code CSS p.test1! Ukuran tetap sama tapi warna berubah</p>
<p class="test2">Pargraph ini menggunakan code CSS p.test2! Warna tetap sama tapi ukuran berubah</p>
</body>
</html>

Hasil code HTML class:

Paragraph ini menggunakan tampilan umum.

Paragraph ini menggunakan code CSS p.test1! Ukuran tetap sama tapi warna berubah.

Paragraph ini menggunakan code CSS p.test2! Warna tetap sama tapi ukuran berubah.

Pada code diatas, pertama kamu mengatur seluruh tampilan paragraph tag secara umum kemudian kamu menggunakan class CSS yang akan mengganti tampilan dari CSS umum.

Penjelasan id

Fungsi ID hampir sama dengan class yaitu membuat sebuah element HTML berpenampilan berbeda dengan yang lainnya. Lihat contoh dibawah untuk aturan penulisan.

Code CSS id:

p#contohID1 { background-color: aqua; }
p#contohID2 { background-color: fuchsia; }

Code HTML id:

<p id="contohID1">Paragraph ini memiliki nama id [contohID1] dan memiliki background aqua.</p>
<p id="contohID2">Paragraph ini memiliki nama id [contohID2] dan memiliki background fuchsia. </p>

Hasil code HTML dan CSS id:

Paragraph ini memiliki nama id [contohID1] dan memiliki background aqua.

Paragraph ini memiliki nama id [contohID2] dan memiliki background fuchsia.

Perhatikan penulisan id pada code CSS, pertama adalah element HTML [p], lalu diikuti oleh symbol pagar [#], dan terakhir adalah nama id [contohID1] sehingga code utuhnya akan tampak seperti [element#idname].

Kalau kamu ingin memanggil code id di HTML maka jangan menggunakan code [class=name] tetapi gunakanlah code [id=name].

Kapan harus menggunakan class dan id?

Code [class] bisa digunakan beberapa kali sedangkan code [id] hanya bisa digunakan sekali saja. Oleh karena itu kamu harus menggunakan code class pada element yang banyak kamu gunakan.

Contohnya adalah bila kamu menggunakan style yang sama untuk semua paragraph yang ada di webpage maka kamu bisa menggunakan code class.

Code CSS class:

p.contohID3 { background-color: #013370; color: white;}

Code HTML class:

<p class="contohID3">Ketiga paragraph disini menggunakan style yang sama sehingga kita menggunakan code class!</p>
<p class="contohID3">Ketiga paragraph disini menggunakan style yang sama sehingga kita menggunakan code class!</p>
<p class="contohID3">Ketiga paragraph disini menggunakan style yang sama sehingga kita menggunakan code class!</p>

Hasil code HTML dan CSS class:

Ketiga paragraph disini menggunakan style yang sama sehingga kita menggunakan code class!

Ketiga paragraph disini menggunakan style yang sama sehingga kita menggunakan code class!

Ketiga paragraph disini menggunakan style yang sama sehingga kita menggunakan code class!

Arti nama class dan id

  • ID = merupakan kependekan dari identifier yang artinya adalah data pribadi seseorang atau obyek.
  • Class = artinya adalah banyak orang di sebuah klas atau kelompok.

Manfaat id

ID hanya bisa digunakan sekali saja. Dari pengalaman saya, umumnya id digunakan untuk layout CSS karena biasanya dalam sebuah layout semua komponennya hanya terdiri dari satu element. Misalkan saja hanya ada satu banner, satu header, dan satu menu navigasi yang berbeda-beda.

class vs id

Gunakan ID jika ingin memodifikasi satu element khusus dan gunakan class bila ingin memodifikasi beberapa element dengan style yang sama.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>