Id dan Class
Selain menetapkan gaya untuk elemen HTML, CSS memungkinkan Anda untuk menentukan penyeleksi Anda sendiri yang disebut "id" dan "class" pada HTML.
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>Sintak class di 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 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>Simpan dengan nama index.html atau *.html, lihat di browser anda. Silahkan dicoba sendiri...
<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>
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.