Pada artikel sebelumnya kita telah belajar tentang Elemen Blok dan Inline. Pada artikel kali ini kita akan mempelajari tentang Class.
Class dalam HTML merupakan atribut yang berfungsi untuk menerapkan style pada elemen-elemen yang sama.
Contoh penggunaannya adalah sebagai berikut :
<!DOCTYPE html> <html> <head> <style> div.kota { background-color:black; color:white; margin:20px; padding:20px; } div.negara { background-color:green; color:red; margin:20px; padding:20px; } </style> </head> <body> <div class="kota"> <h2>Jakarta</h2> <p>Jakarta merupakan Ibu kota dari Negara Indonesia.</p> </div>
<div class="negara"> <h2>Indonesia</h2> <p>Indonesia merupakan salah satu negara yang terdapat di Asia Tenggara.</p> </div> <div class="kota"> <h2>Tokyo</h2> <p>Tokyo adalah Ibu kota dari Negara Jepang.</p> </div> <div class="negara"> <h2>Jepang</h2> <p>Jepang merupakan salah satu negara yang terdapat di Asia Timur.</p> </div> </body> </html>
Berikut hasil dari scrypt di atas :
Penjelasan :
- Pada tag <head> kita menyisipkan <style>
- Sebuah class dalam style ditandai dengan tanda titik(.)
- Dalam tag <style> kita membuat dua div dengan class yang berbeda yaitu div.kota dan div.negara
- div.kota kita beri background-color: black; dan color:white; yang berarti kita memberi background pada div tersebut dengan warna hitam dan memberi warna pada teks yang terdapat di dalamnya dengan warna putih
- div.negara kita beri background-color: green; dan color:red; yang berarti kita memberi background pada div tersebut dengan warna hijau dan memberi warna pada teks yang terdapat di dalamnya dengan warna merah
- Dengan demikian setiap div yang kita definisikan dengan class kota akan diberi background hitam dan warna teks putih, dan setiap div dengan class negara akan diberi background hijau dan warna teks merah.
Demikian Seri Belajar HTML tentang Class. Semoga bermanfaat, terima kasih,
wassalamu'alaikum warahmatullaahi wabarakaatuh.
0 komentar:
Post a Comment
Terima kasih atas kunjungannya, semoga artikel ini bermanfaat. Silahkan berikan komentar Anda.