Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 4 : Mengenal Id dan Class

By Web Design Purbalingga Post a Comment

Mengenal Id dan Class – Untuk lebih memudahkan kita untuk mendesain atau mengubah sebuah elemen pada html, dibutuhkan yang namanya atribut id dan class. Materi ini seharusnya dibahas pada materi html, tapi no problem karena materi tentang id dan class tidak bisa dibahas secara terpisah.

Mengenal Id dan Class

Apa itu id dan apa itu class? Mari kita bahas tentang dua selector ini bersama-sama. Tapi sebelumnya kalian harus sudah mempelajari tentang penulisan struktur pada CSS pada materi sebelumnya.

Id dan Class digunakan untuk menandai bagian mana dari elemen html yang akan kita berikan style. Tentunya antara keduanya memiliki beberapa perbedaan yang cukup signifikan dan wajib kalian ketahui perbedaan dari kedua selector ini. Selector id biasanya didefinisikan dengan sebuah tanda pagar (#) sedangkan untuk selector class didefinisikan dengan tanda titik (.). Agar lebih mudah dalam memahaminya, silahkan perhatikan contoh penggunaannya berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan HTML</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- contoh penggunaan selector id -->
 <div id="text">Ini adalah halaman website pertamaku.</div>

 <!-- contoh penggunaan selector class -->
 <div class="text">Ini adalah halaman website pertamaku.</div>
</body>
</html>

Kemudian tambahkan kode dibawah ini pada file css nya
#text {
 color: #8DFC0A;
 font-weight: bold;
 font-size: 50px;
}

.text {
 color: #00D8FF;
 font-weight: bold;
 font-size: 50px;
}

Dan lihat hasilnya


Selain perbedaan yang pertama diatas, perlu diketahui pula bahwa selector id hanya bisa digunakan pada satu elemen saja. Artinya, selector id hanya digunakan sekali pada elemen html. Sedangkan selector class adalah sebaliknya. Artinya, selector class bisa digunakan berulang kali pada elemen html.

Sekian materi tentang selector id dan class kali ini, semoga mudah dipahami dan jangan lupa untuk selalu berkunjung ke blog ini karena masih banyak sekali materi-materi baru yang lebih menarik untuk dipelajari. Jika ada materi yang belum dipahami, silahkan tinggalkan pertanyaan kalian dikolom komentar di bawah ini. Terima kasih

Post a Comment for "Materi 4 : Mengenal Id dan Class"