HASANONTA - Setelah sebelumnya mempelajari cara menghubungkan HTML dengan CSS, selanjutnya kita akan belajar tentang Class dan ID. Class dan ID adalah penanda spesifik pada HTML. Fungsinya agar HTML kita bisa dimanipulasi dengan CSS dan JavaScript. Contohnya kita ingin merubah paragraf pertama menjadi warna biru tanpa perlu mengganti paragraf yang lainya.
Perbedaan Class dan ID adalah adalah metode pemanggilan, jika menggunakan Class pemanggilan digunakan dengan tanda titik (.). dan ID menggunakan tanda hastag (#). Perbedaan lainya adalah Class bisa digunakan berkali-kali, sedangkan ID hanya bisa digunakan sekali. Contoh :
index.html
<!DOCTYPE html> <html> <head> <title>HasanOnta</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Class dan ID | HasanOnta</h1> <div class="kotak">kotak 1</div> <div class="kotak">kotak 2</div> <div class="kotak">kotak 3</div> <div id="kotak">Kotak 4</div> </body> </html>
style.css
h1{ color: red; font-family: sans-serif; text-align: center; } .kotak{ padding: 50px; width: 100px; color: #fff; margin: 10px; background: pink; } #kotak{ width: 400px; color: #fff; background: green; padding: 50px; }
Output :
Perhatikan contoh diatas, kotak 1, kotak 2 kita beri tanda dengan class yang kita beri nama "kotak", dan kotak 4 kita beri tanda id yang beri nama kotak juga. maka perbedaanya disini akan tampak, bahwa class bisa dipanggil banyak sekaligus, ini dibuktikan kotak 1 dan dua 2 diberi tanda class yang sama yaitu kotak, dan kotak 3 kita ber tanda dengan id kotak. Perlu diingat class dipanggil dengan tanda titik "." dan id dipanggil dengan tanda pagar "#" .
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar