Dalam pertemuan kali ini, saya akan memaparkan mengenai Membuat Class Pada HTML.
HTML Kelas
Menggunakan Kelas Atribut
Atribut class HTML memungkinkan untuk menentukan gaya yang sama untuk elemen dengan nama kelas yang sama.
Disini kita memiliki tiga <div> unsur yang menunjuk ke nama kelas yang sama.
Contoh
<!DOCTYPE html>Hasil
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Karanganyar</h2>
<p>Karanganyar adalah salah satu Kota Wisata di Provinsi Jateng, terutama Wisata Alam.</p>
<p>Yang merupakan salah satu karesidenan Surakarta</p>
</div>
<div class="cities">
<h2>Solo</h2>
<p>Solo adalah Kota besar di Provinsi Jawa Tengah.</p>
<p>Yang menjadi favorite kota-kota se-karesidenan Surakarta.</p>
</div>
<div class="cities">
<h2>Klaten</h2>
<p>Klaten adalah salah satu kota di provinsi Jawa Tengah.</p>
<p>Klaten merupakan Kota Indah yang ada di daerah Karesidenan Surakarta.</p>
</div>
</body>
</html>
Menggunakan Kelas Atribut di Inline Elemen
Atribut kelas HTML juga dapat digunakan untuk elemen inline.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Heading <span class="note">Penting</span> Saya</h1>
<p>Beberapa di antara<span class="note">Yang Penting</span> Adalah Teks.</p>
</body>
</html>
Hasil
REFERENSI
http://www.w3schools.com/html/html_classes.asp
No comments:
Post a Comment