Atribut Class

View Categories

Atribut Class

Atribut class digunakan untuk mengelompokkan atau mengklasifikasi beberapa tag atau elemen HTML. Beberapa tag dapat menggunakan atribut class yang sama. Satu class dapat mempunyai properti CSS. Tag dengan atribut class yang sama akan mempunyai karateristik tampilan yang sama sebab otomatis akan mempunyai properti CSS yang sama.

Penggunaan Class

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Jalankan Contoh

Pada contoh di atas terdapat tiga tag div dengan atribut class yang sama yaitu class city. Ketiga tag div tersebut akan mempunyai properti background-color, color, border, margin dan padding yang sama sesuai dengan properti CSS pada class city.

Cara Menggunakan Class Dan CSS

<!DOCTYPE html>
<html>
<head>
<style>
.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>

Jalankan Contoh

Pada contoh di atas terdapat dua tag span dengan atribut class yang sama yaitu class note. Kedua tag span ini akan mempunyai properti CSS font-size dan color yang sama.

Properti CSS Pada Class

Properti CSS untuk class dapat dibuat dengan format :
. + nama class + { + properti CSS + }
Contoh di bawah memperlihatkan properti CSS untuk class city.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Jalankan Contoh

Tag Dengan Beberapa Class

Satu tag dapat mempunyai beberapa class yang berbeda. Setiap class dipisahkan dengan spasi pada atribut class.

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Jalankan Contoh

Pada contoh di atas tag h2 pertama mempunyai atribut class city dan main dan mempunyai properti CSS dari kedua class tersebut. Sedangkan tag h2 yang lain hanya mempunyai atribut class city.

Class Pada Tag Yang Berbeda

Beberapa tag yang berbeda dapat mempunyai atribut class yang sama.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Jalankan Contoh

Pada contoh di atas tag h2 dan p mempunyai atribut class yang sama yaitu city. Kedua tag ini akan mempunyai properti CSS yang sama.

Tutorial sebelumnya : Tampilan Block Dan Inline
Tutorial setelahnya : Atribut Id
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan