Atribut Class

Berbeda dengan ID yang mereka lebih dikhususkan ke satu elemen saja. Class bisa dipakai di berbagai elemen.

Kita bisa analogikan ID itu seperti NIM dan class itu mahasiswa.

Memberikan Class

Salah satu cara kita menamai sebuah elemen adalah dengan atribut class. Cara menamainya sesederhana:

<elemen class="kelas"></elemen>

Jadi contoh aku ingin memberi class judul ke sebuah heading. Akan kulakukan seperti ini:

<h1 class="judul">Campsite Finder</h1>

Nah karena tadi aku bisa naruh class di mana pun. Aku bisa naruh di berbagai tempat berbeda.

Perlu diperhatikan bahwa, lebih baik class dipakai di elemen yang sama jenisnya. Jadi kalau heading ya biasanya dipakai di heading.

<h1 class="judul">Campsite Finder</h1>
<h1 class="judul">Campsite Online</h1>

Aku juga bisa menaruh lebih dari satu class dalam sebuah elemen seperti ini:

<h1 class="judul besar italic">Campsite Finder</h1>

Nah itulah kenapa class ataupun id tidak boleh menggunakan spasi, karena spasi memisah dua hal berbeda. Jadi di atas ada class judul besar italic berarti class nya ada tiga, yaitu: judul, besar, dan italic.

Sudah ada gambaran? semoga sudah.

Jadi sekarang kalau kita ambil contoh website. Aku ingin memberi class ke beberapa section di sini:

<!-- Bagian Judul -->
<header>
	<h1>Dap's Site</h1>
	<p>Welcome to my site</p>
	<a href="index.html">Home</a> | <a href="about.html">About</a>
</header>

<main>
	<!-- Bagian Tentang -->
	<section id="about" class="bg-biru width-full height-full">
		<h2>Tentang Aku</h2>
		<p>Aku adalah seorang mahasiswa informatika semester 3 yang memiliki passion terutama dalam berbagi ilmu melalui mengajar dan konten.</p>
	</section>

	<!-- Bagian Sosial Media -->
	<section id="socials" class="bg-orange">
		<h2>Follow Me</h2>
		<p>Follow aku di sosial media untuk konten asik</p>
		<ul>
			<li><a href="https://instagram.com/daffarahmn_">Instagram</a></li>
			<li><a href="https://www.tiktok.com/@callsigndap">TikTok</a></li>
			<li><a href="https://x.com/madebydap">X</a></li>
		</ul>
	</section>
</main>

Jadi sekarang di section tentang aku beri tiga class yaitu: bg-biru, width-full, dan height full. Kemudian di section socials aku beri class bg-orange saja.

Jadi paham ya sekarang kegunaan dan cara menggunakannya.