ID dan CLASS pada CSS

Kita akan membahas mengenai id dan class yang ada pada css nih. Saya anggap anda sekalian sudah paham sintaks css dan html.

Pertama, apa itu id dan class di css? Jawabannya simpel, id dan class itu merupakan selector css (saya rasa). Sebagai alternatif, kalau selector menggunakan elemen html dirasa terlalu ribet. Sebagai contoh, kalau ada script html seperti ini

<div>
  <h1>Header1</h1>
  <div>
    <h1>Header2</h1>
  </div>
</div>

Maka, kalau kita hanya ingin mengakses <h1>Header2</h1> maka tidak mungkin kita menggunakan css

div h1{
  ...
}

Karena akan berpengaruh baik pada <h1>Header1</h1> maupun <h1>Header2</h1>. Di sinilah kita bisa menggunakan id ataupun class, dengan catatan: "sesuai kebutuhan".

Selector ID

Selector id digunakan untuk menandai element yang unik. Maksudnya, satu nama id hanya bisa digunakan oleh satu elemen saja. Jika dalam satu halaman web ada elemen yang memiliki nama id sama, maka id hanya akan berpengaruh pada id yang pertama saja. Selector id pada css ditandai dengan "#" (tanpa tanda kutip).
Contoh :

#id1{
  ...Kode CSS... 
}

Sedangkan pada bagian html-nya, misalnya pada header, maka ditulis

<header id="id1">Ini Header</header>

Untuk penulisan nama id, saya sarankan diawali dengan huruf.

Selector Class 

Selector class digunakan untuk menandai elemen-elemen dengan kriteria tertentu pada halaman web. Berbeda dengan selector id yang hanya bisa digunakan oleh sebuah elemen, selector class bisa digunakan oleh elemen manapun. Maksudnya, sebuah selector class bisa dipanggil oleh berbagai elemen pada saat bersamaan. Bahkan, sebuah elemen html bisa memanggil lebih dari satu nama selector class, dengan catatan beberapa class yang dipanggil tidak saling bertentangan style-nya. Selector class ditandai dengan tanda titik "." (tanpa tanda kutip).
Contoh :

.class1{
  ..Kode Css..
}

Sedangkan pada elemen html-nya, misalnya div.

<div class="class1">Ini kotak div</div>

Kalau digunakan pada elemen footer, maka :

<footer class="class1">Ini footer</footer>

Sama seperti id, saya sarankan huruf pertama nama class adalah huruf. Sekalian untuk mempermudah mengingat.

Sekarang, bagaimana caranya satu element html mengakses beberapa class sekaligus?
Pertama, kita bayangkan ada beberapa class pada css seperti berikut :

.latar-hitam{
  background-color: #000;
}
.text-putih{
  color: #fff;
}
.padding16{
  padding: 16px;
}

Kemudian ada sebuah paragraf yang akan menggunakan class .layar-hitam .text-putih dan .padding16
Cara memanggil beberapa class itu cukup dengan menambahkan nama class-nya dan dipisahkan dengan spasi menjadi class="layar-hitam text-putih padding16"

<p class="layar-hitam text-putih padding16">Paragraf</p>

Dengan begitu, paragraf itu akan memiliki background hitam sesuai dengan .layar-hitam, teks berwarna putih sesuai .text-putih dan padding 16px sesuai .padding16

Ada pertanyaan? Silahkan komentarnya.
Semoga Bermanfaat...