Kelas Elemen dalam CSS

Dalam pelajaran sebelumnya, kita memilih elemen halaman berdasarkan nama tag, memberikan gaya, contohnya, kepada semua paragraf sekaligus. Namun dalam halaman, dapat terdapat paragraf dengan tipe berbeda, yang memerlukan penerapan gaya yang berbeda. Untuk memecahkan masalah seperti ini, paragraf yang berbeda dapat dikelompokkan ke dalam kelas CSS yang berbeda.

Untuk mengelompokkan sebuah tag ke suatu kelas, kita perlu menambahkan atribut class pada tag tersebut, dan di dalamnya - tuliskan nama kelas yang Anda buat, yang terdiri dari huruf, angka, karakter garis bawah, dan tanda hubung.

Mari kita lihat contohnya. Kita akan membuat paragraf dengan dua tipe kelas - eee dan zzz:

<p class="eee">
	paragraf dengan kelas eee
</p>
<p class="eee">
	paragraf dengan kelas eee
</p>
<p class="zzz">
	paragraf dengan kelas zzz
</p>
<p class="zzz">
	paragraf dengan kelas zzz
</p>

Sekarang mari kita pilih dalam CSS paragraf-paragraf dengan kelas yang berbeda dan berikan mereka beberapa gaya. Sebagai contoh, kita akan warnai paragraf dengan kelas zzz dengan warna merah, dan paragraf dengan kelas eee - dengan warna hijau.

Untuk melakukan ini di file CSS, kita perlu memilih kelas-kelas kita. Pemilihannya memiliki sintaksis berikut: pertama-tama ditulis karakter titik, kemudian nama kelas yang kita buat. Artinya untuk memilih kelas eee kita perlu menulis .eee, dan untuk kelas zzz - tulis .zzz.

Jadi, mari kita lakukan seperti yang dijelaskan. Mari tambahkan ke HTML kita juga gaya CSS untuk kelas-kelas yang telah kita buat:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Jika kita menjalankan kode kita, hasilnya akan seperti berikut:

Diberikan kode berikut:

<ul>
	<li class="odd">teks</li>
	<li class="eve">teks</li>
	<li class="odd">teks</li>
	<li class="eve">teks</li>
	<li class="odd">teks</li>
	<li class="eve">teks</li>
</ul>

Warnai elemen dengan kelas odd dengan warna merah dan elemen dengan kelas eve dengan warna hijau.

Diberikan kode berikut:

<h2 class="eee">Judul</h2>
<p class="eee">
	paragraf
</p>
<p class="eee">
	paragraf
</p>
<p>
	paragraf tanpa kelas
</p>

<ul class="eee">
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Warnai semua elemen dengan kelas eee dengan warna merah.

Jelaskan mengapa pada tugas sebelumnya tag li berwarna merah, meskipun kelas yang menentukan warna diberikan kepada tag ul.