D'Cak News

Rabu, 15 Desember 2010

Beda antara attribute class dan id pada HTML

Diposting oleh richard_NicolausSmile di 13.45

Setelah kalian mengetahui apa itu CSS, apa itu class, apa itu id di postingan saya sebelumnya. Kalau mau melihat postingan saya sebelumnya dapat klik link ini . Terus apa bedanya antara class dan id??? Penasaran kan?? silahkan baca selanjutnya.....
- Class.
Kita menggunakan Class supaya tampilan HTML elemen dapat sesuai dengan style2 yang tersimpan di dalam kode CSS. Misalnya, kita ingin suatu elemen tertentu memiliki ukuran font yg besar dan berwarna hitam, kita hanya perlu menambahkan style2 tadi ke dalam kode CSS. Lalu apa guna Class di sini? Class berguna untuk membuat suatu elemen dapat terlihat beda dari elemen normal sesuai dengan atribut style Class yang ada dalam kode CSS.
Contoh penggunaan class :
.center
{
text-align:center;
}
.garis
{
text-decoration:underline;
color:red;
}

Kalau anda memasukkan ke dalam elemen paragraf "<p>", anda dapat mengetikkan dua elemen paragraf yang ada di bawah ini:
1. <p class="center">Selamat Datang di blog saya</p>
2. <p class="garis">Selamat jalan-jalan di daerah blog ini</p>

Bagaimana kedua class yg disebutkan di atas yakni class center dan class garis digabung menjadi satu elemen paragraf jadi kita tidak perlu membuat dua elemen paragraf yang masing-masing terdiri dari satu class??? Pikir dulu ah.....minum kopi sambil merokok...hehehe.. (catatan: untuk kasus ini disesuaikan dengan kebutuhan)
Berikut ini caranya:
- <p class="center garis">Selamat Datang di blog saya. Selamat jalan-jalan di blog saya</p>
Lalu, apa yang terjadi setelah anda mengetik source code HTML tersebut?? Hasilnya adalah tulisan "Selamat Datang di blog saya. Selamat jalan-jalan di blog saya" berubah menjadi warna huruf merah, tulisan jadi rata tengah dengan diberi garis bawah

- Id
Id hampir sama dengan class. Namun yang membedakan dengan class adalah sifatnya yang unik, berdiri sendiri di satu elemen, bersifat homogen alias homo dalam satu elemen. Id disimbolkan dengan tanda #
Contoh penggunaan Id pada file CSS:
#tes
{
background-image: url ('namagambar.jpg');
}
Setelah membuat Id, implementasikan id tersebut di file HTML.
misal, taruh nama id tes di dalam elemen body dengan tujuan untuk menghasilkan gambar pada background web yang dibuat.
Contoh penggunannya:
<body id="tes">
<h1>Belajar CSS</h1>

</body>