Beda ID dan CLASS di CSS

Bagi yang sudah terbiasa membuat website atau belajar tentang web pastilah sudah mengenal yang namanya CSS. CSS adalah singkatan dari Cascade Style Sheet. Dari namanya saja kita sudah bisa tahu bahwa CSS ini adalah sebuah halaman style. Yah kalau mau digampangkan, CSS ini adalah pakaian. Jadi manusianya boleh sama, pakaiannnya bisa berbeda-beda. So, dengan CSS, isi dari sebuah website tetap, tapi tampilannya bisa menjadi berbeda-beda tergantung bagaimana CSS nya. Kalau halaman web statis biasanya filenya adalah html, maka untuk CSS file extentionnya juga css. Misalkan index.html, berita.html dan seterusnya adalah file-file HTML. Sedangkan menu.css, right.css, page.css dan seterusnya adalah file CSS. Tulisan ini tentunya tidak akan saya fokuskan untuk bagaimana konsep-konsep dasar CSS dan menggunakan CSS secara detil, tulisan ini hanya memfokuskan ke perbedaan ID dan CLASS saja. Untuk topik khusus untuk membedah CSS nantilah akan saya buatkan.

Q: Bli, tolong dong tutorialnya pake Video juga biar lebih jelas.
A: Iya pasti, ini sedang nyari-nyari lokasi dimana bisa merekamnya dengan sepi sehingga suara bisa kedengaran jernih. So tunggu saja ya

Ok jadi gini, saat kita pake CSS, maka ID dan CLASS akan sangat super sering kita gunakan. Seringkali kalau kita mencermati CSS di website, ada yang nulis pake ID ada yang pake CLASS. Sebenarnya bedanya apa sih. Untuk itu mari kita lihat dulu contoh di bawah ini ya

<html>
 <head>
  <title>Ayo Belajar</title>
 </head>
<body>
 <div id="wrapper">
  <div id="header">
   <div class="kiri">Tempatnya Logo</div>
   <div class="kanan">Tempat nulis menu</div>
  </div>
  <div id="content">
    <p class="right>Nulis yang banyaaaaaakkk di sini yaaa </p>
  </div>
 </div>
</body>
</html>

Coba lihat contoh file HTML di atas. Kalau dicermati lagi maka ada beberapa ID dan beberapa CLASS yaitu ID wrapper, header dan CLASS kiri serta kanan.  Isi CSS nya nanti kira-kira seperti di bawah ini :


#wrapper{
 width:800px;padding:0;margin:0 auto;
}
#header{
 height:200px;background-color:#FFAABB;
}
.kiri{
 float:left;
}
.kanan{
 float:right;
}

 

Ok sekarang kita cermati file css di atas. Jika diawali dengan tanda # maka artinya dia itu ID. Sedangkan jika diawali dengan tanda titik maka artinya CLASS.

ID biasanya digunakan untuk menunjukkan suatu yang unik. Misalkan ID wrapper di atas tersebut, hanya ada sebuah saja di halaman tersebut.  Sedangkan CLASS untuk penggunaan berkali-kali dan untuk elemen yang bermacam-macam. Kalau dilihat di file CSS di atas, yang disebur class kiri adalah menempatkan rata kiri. class ini bisa digunakan oleh tag apa saja, contohnya tag <p> dan <div> seperti di atas. Artinya nanti isi di dalam elemen tersebut akan dijadikan rata kiri.

Sudah itu saja. Nothing more. Untuk tahu lebih detil, kita harus sering dulu latihan menggunakan CSS nya jadi akan dapet feelnya nanti.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *