maksud dari ID dan CLASS pada CSS selain untuk menetapkan style untuk halaman html,CSS memungkinkan Anda untuk menentukan penyeleksi Anda sendiri yang disebut "id" dan "class".
penjelasan id :
Id digunakan untuk menentukan style untuk elemen tunggal yang unik.
Id menggunakan atribut id elemen HTML, dan didefinisikan dengan "#".
Aturan style dibawah ini akan diterapkan ke elemen dengan id = "kocak":
contoh:
# kocak
{
text-align: center;
warna: merah;
}
contoh hasil editan:
<html>
<head>
<style type="text/css">
#kocak{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="kocak">Hello kawan</p>
<p>semoga artikel ini bermanfaat.</p>
</body>
</html>
Hello kawan
semoga artikel ini bermanfaat
Catatan : jangan memulai nama ID dengan nomor! Ini tidak akan bekerja di Mozilla / Firefox.
penjelasan class :
class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, class yang paling sering digunakan pada beberapa elemen.
Hal ini memungkinkan Anda untuk menetapkan style tertentu untuk banyak elemen HTML dengan class yang sama.
class menggunakan atribut class HTML, dan didefinisikan dengan "." (tanda titik)
Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan menjadi center-blok:
contoh:
. pusat {text-align: center;}
contoh hasil editan :
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">tengah-tengah</h1>
<p class="center">tengah-tengah.</p>
</body>
</html>
maka hasilnya akan menjadi
tengah-tengah
tengah-tengah
anda juga dapat menentukan bahwa hanya elemen HTML khusus harus dipengaruhi oleh class.
Pada contoh di bawah ini, semua elemen p dengan class = "center" akan menjadi center-blok:
contoh:
p.center {text-align: center;}
contoh hasil editan :
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">kocak-kocak-kocak</h1>
<p class="center">kocak-kocak-kocak.</p>
</body>
</html>
maka hasilnya akan menjadi :
kocak-kocak-kocak
kocak-kocak-kocak
Catatan :JANGAN memulai nama class dengan nomor! Ini hanya didukung di Internet Explorer
terimaksih semoga bermanfaat ..
No comments:
Post a Comment
silakan tulis komentar anda