Apa itu Html Class?
Mengenal HTML Class - Mungkin konco sinahu sering melihat kata class bertebaran di struktur syntax kode. Biasanya banyak kita jumpai pada struktur kode dalam template. Misalnya, di blogger kalau kita buka opsi template => edit html, di dalamnya nanti banyak kita temukan div class, span class, dll.
Nah, apa itu html class? Mudahnya, menggunakan elemen html class akan memudahkan mendefinisikan style CSS yang sesuai untuk elemen html class tersebut. Biar mudah dipahami, silahkan simak contoh berikut.
Contoh Penggunaan Html Class
<!DOCTYPE html>
<html>
<head>
<style>
.diy {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
.bandung {
background-color:red;
color:white;
margin:20px;
padding:20px;
}
.surabaya {
background-color:green;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="diy">
<h2>DIY</h2>
<p>DIY adalah sebutan untuk Daerah Istimewa Yogyakarta. Yaitu daerah Istimewa setingkat provinsi di Indonesia yang terletak di bagian selatan Pulau Jawa bagian tengah.</p>
<br>
<p>Daerah Istimewa ini terkenal di tingkat nasional,dan internasional, terutama sebagai tempat tujuan wisata andalan. Daerah Istimewa Yogyakarta mengalami beberapa bencana alam besar termasuk bencana gempa pada tanggal 27 Mei 2006, dan erupsi Gunung Merapi pada medio Oktober-November 2010.</p>
</div>
<div class="bandung">
<h2>Bandung</h2>
<p>Bandung adalah kota metropolitan terbesar di Jawa Barat sekaligus menjadi ibu kota provinsi tersebut. Kota ini terletak 140 km sebelah tenggara Jakarta, dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan Surabaya menurut jumlah penduduk.</p>
<br>
<p>Kota kembang merupakan sebutan lain untuk kota ini, karena pada zaman dulu kota ini dinilai sangat cantik dengan banyaknya pohon-pohon dan bunga-bunga yang tumbuh di sana.</p>
</div>
<div class="surabaya">
<h2>Surabaya</h2>
<p>Kota Surabaya adalah ibu kota Provinsi Jawa Timur, Indonesia sekaligus menjadi kota metropolitan terbesar di provinsi tersebut. Surabaya merupakan kota terbesar kedua di Indonesia setelah Jakarta. Kota Surabaya juga merupakan pusat bisnis, perdagangan, industri, dan pendidikan di Jawa Timur.</p>
<br>
<p>Surabaya terkenal dengan sebutan Kota Pahlawan karena sejarahnya yang sangat diperhitungkan dalam perjuangan merebut kemerdekaan bangsa Indonesia dari penjajah.</p>
</div>
</body>
</html>
Hasilnya seperti ini :
DIY
DIY adalah sebutan untuk Daerah Istimewa Yogyakarta. Yaitu daerah Istimewa setingkat provinsi di Indonesia yang terletak di bagian selatan Pulau Jawa bagian tengah.Daerah Istimewa ini terkenal di tingkat nasional,dan internasional, terutama sebagai tempat tujuan wisata andalan. Daerah Istimewa Yogyakarta mengalami beberapa bencana alam besar termasuk bencana gempa pada tanggal 27 Mei 2006, dan erupsi Gunung Merapi pada medio Oktober-November 2010.
Bandung
Bandung adalah kota metropolitan terbesar di Jawa Barat sekaligus menjadi ibu kota provinsi tersebut. Kota ini terletak 140 km sebelah tenggara Jakarta, dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan Surabaya menurut jumlah penduduk.Kota kembang merupakan sebutan lain untuk kota ini, karena pada zaman dulu kota ini dinilai sangat cantik dengan banyaknya pohon-pohon dan bunga-bunga yang tumbuh di sana.
Surabaya
Kota Surabaya adalah ibu kota Provinsi Jawa Timur, Indonesia sekaligus menjadi kota metropolitan terbesar di provinsi tersebut. Surabaya merupakan kota terbesar kedua di Indonesia setelah Jakarta. Kota Surabaya juga merupakan pusat bisnis, perdagangan, industri, dan pendidikan di Jawa Timur.Surabaya terkenal dengan sebutan Kota Pahlawan karena sejarahnya yang sangat diperhitungkan dalam perjuangan merebut kemerdekaan bangsa Indonesia dari penjajah.
Jadi kesimpulannya, gaya yang akan tampil dalam elemen html class tertentu itu mengikuti style CSS dengan id yang sama. Silahkan bereksperimen untuk melihat hasil yang berbeda.
0 Komentar untuk "Mengenal HTML Class"