Jika kita ibaratkan seperti membangun rumah, HTML adalah sebagai kerangka rumahnya. Hanya berisikan struktur namun tampilanya masih polos. Agar terlihat lebih menarik, maka HTML harus dibantu oleh perintah CSS. Sehingga jadilah suatu keutuhan tampilan websitenya. Dalam menggunakan perintah CSS biasanya menggunakan selector. Bisa dengan selector tag, ataupun kita buat sendiri selectornya dengan class. Sesuai dengan pembahasan kita kali ini, kita akan belajar mengenai penggunaan class CSS pada HTML.

Seperti yang telah kita ketahui, dalam penggunaan CSS di HTML tergantung dari selector yang kita pilih. Misalnya seperti ini.

<p> test paragraf </p>

Maka penulisan CSS untuk tag diatas bisa kita tuliskan dengan cara seperti ini.

p{
    perintah css apa saja boleh.
}

Namun jika dalam website kita memiliki banyak selector yang sama dan ingin hasilnya berbeda tentu akan jadi masalah jika cara penulisanya seperti itu. Maka dari itu kalian bisa buat sendiri selectornya dengan menggunakan Class. Class ini dibuat untuk selector sesuai keinginan kita. Kira-kira seperti ini.

<p> Paragraf satu </p>
<p class=" kelas "> Paragraf Class </p>

Jika HTMLnya seperti diatas dan kita ingin merubah paragraf yang kedua, maka kalian bisa menuliskan CSSnya seperti berikut.

.kelas{
    color:red;
}

Dan hasilnya adalah paragraf kedua yang akan berubah warnanya menjadi merah, karena kita menuliskan CSSnya hanya untuk Class kelas.

Kelebihan dari class adalah kita bisa memasukan class lebih dari satu. Misalnya seperti berikut ini.

<p class="merah"> teks ini merah </p>
<p class"merah garisbawah"> teks ini merah dan ada garis bawah </p>

Lalu kalian buat CSSnya seperti ini.

.merah{
    color : red ;
}
.garisbawah{
    text-decoration : underline ;
}

Maka hasilnya akan seperti berikut ini.

Dari kedua paragraf tersebut sama-sama memiliki class merah sehingga keduanya pun teksnya berubah warna menjadi merah. Namun pada paragraf kedua sehabis class merah ditambah kata garisbawah dimana itu diartikan adanya class lain selain merah. Dan hasilnya paragraf kedua menjadi berwarna merah dan ada garis bawahnya. Mudah bukan ?

Sekian pembahasan mengenai bagaimana penggunaan class CSS pada HTML. Semoga bermanfaat.