Dalam pengembangan web, CSS (Cascading Style Sheets) digunakan untuk mengontrol tampilan visual elemen HTML. Salah satu konsep penting dalam CSS adalah penggunaan class. Artikel ini akan menjelaskan pengertian class di CSS beserta contohnya secara lengkap.
Css Class adalah Class di CSS merupakan identifikasi yang dapat digunakan secara reusable (dapat digunakan berulang-ulang) untuk mengelompokkan beberapa elemen HTML. Dengan memberikan class yang sama kepada beberapa elemen, Anda dapat mendefinisikan set gaya yang sama yang akan diterapkan secara seragam pada semua elemen dalam class tersebut. Class memberikan cara untuk menargetkan dan mengubah gaya elemen berdasarkan karakteristik yang sama, sehingga memungkinkan pengaturan gaya yang konsisten dan efisien di seluruh halaman web Anda.
Syntax dan Penggunaan: Untuk mendefinisikan class di CSS, gunakan tanda titik (.) atau (.selector) diikuti dengan nama class. Misalnya, jika Anda ingin membuat class dengan nama “highlight”, Anda akan menuliskan “.highlight” di dalam file CSS Anda. Untuk mengaplikasikan class pada elemen HTML, tambahkan atribut “class” pada tag pembuka elemen dan tentukan nama class yang ingin Anda gunakan.
Berikut contoh cara mendefinisikan class dan mengaplikasikannya pada elemen HTML:
Penulisan class pada CSS di HTML
| HTML | CSS |
| <p class=”highlight”>Teks ini akan dihighlight.</p> | .highlight { color: red; font-weight: bold; } |
Pada contoh di atas, class “highlight” didefinisikan di CSS dengan gaya-gaya yang telah ditentukan. Elemen <p> dengan atribut class yang bernilai “highlight” akan mewarisi gaya yang telah ditentukan, sehingga teks akan berwarna merah dan tebal.
Multiple Class: Elemen HTML dapat memiliki beberapa class yang diberikan dengan memisahkan setiap nama class menggunakan spasi. Hal ini memungkinkan Anda menggabungkan gaya-gaya dari beberapa class pada satu elemen. Contohnya:
| HTML | CSS |
| <p class=”primary bold”>Teks ini akan berwarna biru dan tebal.</p> | .primary { color: blue; }.bold { font-weight: bold; } |
Pada contoh di atas, elemen <p> memiliki kedua class “primary” dan “bold” yang diberikan, sehingga menghasilkan teks berwarna biru yang juga tebal.
Note: Silahkan temen-temen lihat hasilnya pada kode diatas agar langsung praktik.
Spesifitas CSS: Ketika menggunakan class, penting untuk memahami spesifitas CSS. Jika terdapat beberapa class dengan gaya yang bertentangan yang diberikan pada elemen yang sama, maka gaya yang memiliki spesifitas tertinggi akan diterapkan. Jika dua class memiliki spesifitas yang sama, gaya yang dideklarasikan lebih akhir dalam file CSS akan menjadi yang dominan.
Baca Juga : Pengertian HTML Lengkap dengan Fungsi, Struktur, dan Contoh Penerapannya
Dukungan Browser
Berikut adalah keterangan mengenai dukungan (support) dari beberapa browser.
| CSS | Browser | Browser | Browser | Browser | Browser |
|---|---|---|---|---|---|
| selector | Chrome | Safari | Firefox | Opera | IE |
.class | Ya | Ya | Ya | Ya | Ya |
Penutup
Dalam pengembangan web, penggunaan class di CSS adalah salah satu konsep penting yang memungkinkan pengembang untuk mengatur dan mengubah tampilan elemen HTML dengan cara yang efisien dan konsisten. Dalam artikel ini, kami telah menjelaskan pengertian class di CSS, mulai dari sintaksis dasar hingga penggunaannya dalam mengatur gaya elemen.
Dengan menggunakan class, Anda dapat dengan mudah mengelompokkan elemen dengan karakteristik yang sama dan menerapkan gaya yang seragam ke seluruh elemen tersebut. Ini membantu menciptakan konsistensi dalam tampilan halaman web Anda, menghemat waktu dan usaha dalam pengembangan, serta meningkatkan efisiensi dalam pemeliharaan kode CSS.
Apakah kamu ingin mempelajari dasar-dasar HTML, membangun halaman web yang menarik, atau mengembangkan keahlian dalam pengkodean web?
e-Book kami memberikan panduan langkah demi langkah yang mudah diikuti, dilengkapi dengan contoh kode dan penjelasan yang jelas.
Apa yang akan kamu dapatkan dari eBook ini:
- Penjelasan mendalam tentang tag-tag HTML dan fungsinya.
- Petunjuk praktis untuk membangun struktur dasar halaman web.
- Cara mengatur tata letak dan gaya menggunakan CSS.
- Teknik dasar untuk menambahkan gambar, tautan, dan multimedia ke dalam halaman web.
- Tips dan trik untuk mengoptimalkan kode HTML Anda.
Jangan lewatkan kesempatan ini untuk meningkatkan pengetahuan dan keterampilan kamu dalam Pengembangan Web. Unduh eBook “Panduan Pemula HTML: Menguasai Dasar-Dasar Pengembangan Web” secara gratis sekarang juga!
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.
