Menggunakan class Atribut
HTML class atribut memungkinkan untuk menentukan gaya yang sama untuk elemen dengan nama kelas yang sama.
Di sini kita memiliki tiga <div> elemen yang menunjuk ke nama kelas yang sama:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most
populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of
France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</body>
</html> Cobalah sendiri " London
London adalah ibu kota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.
Paris
Paris adalah ibukota dan kota terpadat dari Perancis.
Terletak di Sungai Seine, itu adalah di jantung wilayah Ile-de-France, juga dikenal sebagai parisienne daerah.
Di daerah metropolitan adalah salah satu pusat populasi terbesar di Eropa, dengan lebih dari 12 juta penduduk.
Tokyo
Tokyo adalah ibukota Jepang, pusat Greater Tokyo Area, dan daerah metropolitan terpadat di dunia.
Ini adalah kursi dari pemerintah Jepang dan Istana Kekaisaran, dan rumah dari Keluarga Kekaisaran Jepang.
Tokyo prefektur adalah bagian dari wilayah metropolitan terpadat di dunia dengan 38 juta orang dan ekonomi perkotaan terbesar di dunia.
Menggunakan class Atribut pada Inline Elements
Atribut class HTML juga dapat digunakan untuk elemen inline:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span
class="note">Important</span> Heading</h1>
<p>This
is some <span
class="note">important</span> text.</p>
</body>
</html> Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 »