Apa perbedaan antara penggunaan sebuah class dan sebuah id dalam css?

Halo Selamat Pagi Teman Teman Semua, Bagaimana keadaannya nih? Semoga baik baik saja ya, Mm bagaimana dengan Semangat Belajar nya??

Harus di tingkatkan yah. karena apakah teman teman tau bahwa tidak ada yang rugi dari kita belajar. Yes!!

Baik teman teman pada kesempatan ini kita akan membahas tentang Selector Id dan Class. Apakah teman teman sudah tau, bahwa di dalam Penggunaan CSS di HTML itu terdapat id dan class?

Baik Mari kita simak dibawah ini.

Selector Id dan Class

Oke teman teman, pada artikel sebelumnya kita sudah memahami tentang Struktur Dasar CSS

BELAJAR CSS | MENGENAL STRUKTUR DASAR CSS

Nah di dalam artikel sebelumnya sudah terdapat penggunaan Selector.  pada artikel ini kita akan melanjutkan ke bagian.

1. Selector
2. Id
3. Class

Baik kita akan membahas satu persatu

SELECTOR

Selector pada CSS kemarin kita dapat langsung menggunakan langsung pada tag yang ingin kita ubah atau edit dengan CSS.

contoh nya seperti ini

Selector CSS

pada gambar diatas kita langsung menyorot pada tag h2, yang berarti secara menyeluruh h2 yang ada di dalam HTML akan memiliki warna Hijau.

Namun jika kita menggunakan Id dan Class itu tidak akan terjadi. Mari kita simak selanjutnya.

Id

Dalam Penggunaan Id ini, kita akan menambahkan sebuah tanda pagar di depan CSS. id disini bisa dibilang sebagai penanda, kenapa begitu, karena kita bisa memanipulasi tampilan pada HTML dengan CSS id ini. Contoh

/*style.css*/

#div1 {
 background-color: black;
 color: white;
 text-align: center;
}

/*index.html*/



 
 
 


 

  
Hello Kawanku
 
 

Maka hasilnya adalah seperti ini.

id pada CSS

CLASS

Didalam penggunaan CLASS ini tidak lah jauh berbeda dengan penggunaan Id , hanya saja bagian depan dan pemanggil yang berbeda.

contoh seperti ini.

/*style.css*/

.div1 {
 background-color: black;
 color: white;
 text-align: center;
}

/*index.html*/



 
 
 


 

  
Hello Kawanku
 
 

maka hasil nya akan sama dengan penggunaan Id.

Contoh lengkap

/*style.css*/
  p { text-align: center; } #div1 { background-color: black; color: white; text-align: center; } .box1 { border-radius: 5px; background-color: #2CC6BA;
width: 100px; height: 100px; margin: auto; } .box2 { border-radius: 5px; background-color: #BD3535; width: 150px; height: 100px; margin: auto; } #box3 { border-radius: 5px; background-color: #48D73A; width: 300; height: 100px; margin: auto; }

/*index.html*/
        
 
Hello Kawanku
 
 
Box1
 
 
 
Box2
 
 
 
Box3
 
  

Dan akan menghasilkan

Selector Id dan Class

Perbedaan Id dan Class

Oke pada bagian atas kita sudah mencoba bagaimana cara menggunakan Id dan Class.

dan perbedaan nya adalah ini.

id | di dalam penggunaan id perbedaan yang terdapat yaitu |, pada penggunaan CSS yang diawali dengan pagar (#) , dan di dalam file index.html dalam pemanggilan nya menggunakan id="".

class |perbedaan yang terdapat yaitu|, diawali dengan tanda titik (.) dan pemanggilan nya dengan class="".

Oke teman teman , semoga ini bermanfaat untuk teman teman sekalian yah. Jika ada yang kurang jelas silahkan berkomentar dibawah artikel ini.
Terimakasih Sudah berkunjung :)

Salam Semangat!!

Apa perbedaan antara class dan ID dalam CSS?

Apa perbedaan ID dan class pada HTML?

Apa gunanya class pada CSS?

Apa itu CSS id?