Kelas HTML

Klasifikasi HTML (set class) sehingga kami dapat mendefinisikan gaya CSS untuk class elemen.

Tetapkan gaya yang sama untuk class yang sama, atau tetapkan gaya yang berbeda untuk class yang berbeda.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London adalah ibu kota Inggris. 
Ini adalah kota yang paling penduduk di Inggris, 
dengan area metropolitan yang melebihi 13 juta penduduk.
</p>
</div> 
</body>
</html>

Coba Sendiri

elemen blok kelasifikasi

Elemen HTML <div> adalahElemen Blokdan dapat digunakan sebagai kontainer untuk elemen HTML lainnya.

Seting class untuk elemen <div> sehingga kami dapat menetapkan class yang sama untuk elemen <div> yang sama:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London adalah ibu kota Inggris. 
Ini adalah kota yang paling penduduk di Inggris, 
dengan area metropolitan di atas 13 juta penduduk.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris adalah ibu kota dan kota yang paling penduduk di Perancis.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang, pusat Area Besar Tokyo,</p>
dan area metropolitan yang paling penduduk di dunia.</p>
</div>
</body>
</html>

Coba Sendiri

Kelas Elemen Baris

Elemen <span> HTML adalah elemen baris, dapat digunakan sebagai wadah teks.

Atur kelas elemen <span>, dapat menata gaya yang sama untuk elemen <span> yang sama.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

Coba Sendiri