Memahami Atribut Class Dan Id Pada HTML
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.Zona Internetku November 29, 2018
Dalam penggunaan atribut id dan group memiliki sedikit perbedaan yaitu dimana atribut id hanya boleh digunakan untuk satu element html saja, umumnya atribut ini digunakan pada tag html pembungkus seperti header, nav, main, sidebar,
<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>
Itulah penjelasan mengenai Mengenal Fungsi Atribut Dan Value Pada Class Dan Id Di HTML.
Baca juga :
Mengatur Heading Dan Format Text Web Menggunakan HTML