Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.

Powered By Blogger Widgets and warungbelajar

Jumat, 25 November 2011

Perbedaan ID dan Class di Css




Kali ini kita akan belajar Perbedaan fungsi ID dan class pada Css , Apa sih fungsi mereka ??
Warung belajar akan membahasnya, karena ID dan class itu adalah bagian Css yang harus kita pahami terlebih dahulu,Ukey langsung saja , tetapi jika anda bingung silahkan baca dulu postingan saya sebelumnya mengenai "Pengenalan Css" dan "Syntax Css"




ID
1.ID hanya bisa digunakan untuk satu objek saja
2. Script diawali dengan tanda #
Contoh Pengunaan dari  ID :

<html>
<head>
<style type="text/css">
#tulisan
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="tulisan">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>


Keterangan :
#tulisan
Adalah nama sebuah id , css membuat sebuah id dengan nama “tulisan” dan nantinya property dan value yang ada di id “tulisan” ini hanya bisa digunakan di satu objek saja yang menggunakan id "tulisan"

Terlihat di dalam script html

terdapat Script "Hello World!"

Yang merupakan Sebuah paragraf yang diberi id "tulisan", nah paragraf dengan id “tulisan” ini nanti yang diubah propertinya seperti perintah css

Hasilnya :




Bisa dilihat yang berganti hanya tulisan “Hello World!” karena paragraf ini memakai id “tulisan”
color:red;Untuk warna tulisan berganti warna merah
text-align:center;
Untuk merubah posisi text ke arah tengah 



class

1.class adalah style dari css yang bisa digunakan untuk beberapa elemen, dengan adanya class ini memungkinkan anda untuk merubah beberapa objek pada html dengan settingan yang sama, dengan menuliskan satu perintah saja
2.class diawali dengan Script “.”

Dalam contoh kita akan membuat sebuah class dengan nama “center”
Contoh Script :
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}

</style>
</head>
<body>
<p class="center">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Maka semua objek jika yang terdapat class dengan nama center textnya akan dimulai dari bagian tengah


Contoh penggunaan Class dan ID
<html >
<head>
<title>Untitled Document</title>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
.center
{
color:#0000FF;
}
</style>
</head>
<div id="para1">
Hello World!</div>
<div class="center">
paragraph yang terkena class </div>
<div class="center">
paragraph yang terkena class2 </div>

<body>
</body>
</html>

Hasil





Penjelasan :
Teradapat :
1 ID dengan nama para1 yang berisi property :
Posisi tulisan : tengah
Warna :merah

1 class yang berisi property :
Untuk merubah warna menjadi biru

Terlihat perbedaan dari class dan id ,
id dengan nama para1 hanya bisa dipanggil 1 kali saja untuk paragraph yang berisi tulisan “Hello World”
class dengan nama center bisa dipanggil 2 kali

Ya itu penjelasan mengenai Perbedaan dari ID dan class dari Css serta implementasi pada Script Css , Semoga bisa bermanfaat kawan :D

Jika anda suka dengan artikel di blog ini.Silahkan berlangganan GRATIS via EMAIL.Isi alamat email anda di bawah ini

Masukkan Email anda disini:

Delivered by FeedBurner

Baca Artikel Menarik Lainnya Gan

4 komentar:

Anonim mengatakan...

makasih gan

Infoku - Mencari Arti Tak Pernah Semudah Ini mengatakan...

Baru tau, tentang tentang perbedaan class dan id. biasanya ana cuman ngebedainnya kalo class ya .nama-kelas kalo id ya #nama-id. hehe

semoga membantu yang lainnya juga.

Ani Satriani mengatakan...

maksudnya gimana klo id hanya bisa dipanggil 1 kali pada 1 elemen,

ane coba tambahin lagi sampe jadi kek gini :
tag div dengan id para1,
maksudnya ane copy dan paste dibawah tag div id=para1

2 hello world yang muncul

berbagi cerita mengatakan...

infoku : ya semoga bisa bermanfaat :D

Ani : ya maksudnya dibuat satu kali itu... biasanya untuk ID lebih sering digunakan untuk layout halaman... memang 2kali dan selebihnya memang bisa mas...

Poskan Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons