Memahami Atribut Class Dan Id Pada HTML

Zona Internetku No Comment November 29, 2018

Belajar Memahami Fungsi Atribut Class Dan Id Pada HTML. Atribut class dan id merupakan sebuah atribut yang digunakan untuk memberikan sebuah selector atau penanda yang berfungsi untuk memudahkan kita dalam menyeleksi tag tertentu dan memanipulasinya dalam file css dan javascript. Pada penggunaan atribut id di tag html maka di css harus menggunakan tanda tagar "#" sedangkan untuk atribut class di html diharuskan menggunakan tanda titik "." untuk memanggilnya.

Dalam penggunaan atribut id dan class memiliki sedikit perbedaan yaitu dimana atribut id hanya boleh digunakan untuk satu element html saja, biasanya atribut ini digunakan pada tag html pembungkus seperti header, nav, main, sidebar, dan footer. Sedangkan atribut class bisa digunakan banyak tag html dan dapat dipanggil secara keseluruhan, biasanya digunakan sebagai isi pada tag html, seperti ul, ol, div dan lainnya. Jika kalian kurang paham maka kalian bisa meihat contoh penggunaan atribut class dan id seperti berikut

<html>
<head>
<title>Memahami Fungsi Atribut Id Dan Class</title>
<style>
#kotak_pembungkus{display:block;background:blue;margin:0 auto;width:370px}
.kotak{display:inline-block;width:100px;height:100px;margin:10px;text-align:center;background:red;line-height:100px;color:#fff}
</style>
</head>
<body>
<div id="kotak_pembungkus">
<div class="kotak">Kotak 1</div>
<div class="kotak">Kotak 2</div>
<div class="kotak">Kotak 3</div>
</div>
</body>
</html>

Dan berikut ini adalah hasilnya, kotak semua kotak yang berwarna merah berada di dalam area kotak biru.

Baca juga :
Cara Menyisipkan Gambar Di Web Dengan HTML
Cara Membuat Berbagai Macam HyperLink HTML Di Web
Mengatur Posisi Paragraf Dengan HTML Dan CSS

Lalu bagaimana cara merubah warna kotak nomor 2 menjadi warna hijau ? untuk mengubahnya, caranya sangat mudah sekali yakni kita cukup menambahkan sebuah value baru pada atribut class yang ingin kita ubah beserta menambahkan kode cssnya

<html>
<head>
<title>Memahami Fungsi Atribut Id Dan Class</title>
<style>
#kotak_pembungkus{display:block;background:blue;margin:0 auto;width:370px}
.kotak{display:inline-block;width:100px;height:100px;margin:10px;text-align:center;background:red;line-height:100px;color:#fff}
/* CSS baru harus di bawah CSS utama */
.hijau{background:green;color:yellow}
</style>
</head>
<body>
<div id="kotak_pembungkus">
<div class="kotak">Kotak 1</div>\
<!-- perhatikan atribut class kotak 2 yang ditambah value baru bernama hijau -->
<div class="kotak hijau">Kotak 2</div>
<div class="kotak">Kotak 3</div>
</div>
</body>
</html>

Memahami Atribut Class Dan Id Pada HTML 2

Untuk menambahkan sebuah selector baru menggunakan class kita tidak perlu menambahkan atribut lagi jika sudah ada atribut class, kita hanya perlu menambahkan value baru pada atribut tersebut. Untuk mengubah kode CSSnya kalian harus meletakkan di bawah kode css utama supaya perubahan pada css bisa di proses dengan benar dan tidak error.
Itulah penjelasan mengenai Mengenal Fungsi Atribut Dan Value Pada Class Dan Id Di HTML.

Baca juga :
Mengatur Heading Dan Format Text Web Menggunakan HTML
Tutorial Membuat Tabel Di Web Dengan HTML
Macam - Macam Tag HTML Beserta Fungsi Dan Contohnya

Promo Menarik