id dan class pada HTML dan sintak di CSS nya

Id dan Class

Selain menetapkan gaya untuk elemen HTML, CSS memungkinkan Anda untuk menentukan penyeleksi Anda sendiri yang disebut "id" dan "class" pada HTML.


Sintak id di HTML

Pemilih id digunakan untuk menentukan gaya untuk elemen tunggal yang unik.

Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan "#".

Aturan gaya bawah ini akan diterapkan pada elemen dengan id= "gspot": 
#gspot{text-align:center;color:red;}
Lengkapnya:
<html>
<head>
<style type="text/css">
#gspot{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="gspot">Hello World!</p>
<p>Contoh sintak css menggunakan id di gspot-design.</p>
</body>
</html> 
Sintak class di HTML 

Sintak class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen.

Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk elemen HTML banyak dengan class yang sama.

Pemilih class menggunakan atribut class HTML, dan didefinisikan dengan "."

Pada contoh di bawah, semua elemen HTML dengan class ="center" akan menjadi pusat-blok:
.center {text-align:center;}
Atau
p.center {text-align:center;}
Lengkapnya:
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Tidak ada hubungannya dengan css diatas jadi tidak ada effeknya di browser</h1>
<p class="center">Berhubungan dengan css diatas sehingga align menjadi center.</p>
</body>
</html> 
Simpan dengan nama index.html atau *.html, lihat di browser anda. Silahkan dicoba sendiri...


Keterangan penting:

  • JANGAN memulai nama ID dengan nomor! Ini tidak akan bekerjadi Mozilla / Firefox.
  • JANGAN memulai nama class dengan nomor! Ini hanya didukungdi Internet Explorer.