Tutorial CSS #2 - Elemen Id dan Class Selector

SaungIT.web.id - Kami akan melanjutkan pembahasan CSS ke 2 yaitu tentang elemen id dan class selector pada CSS. Sebagian kalangan proggrammer sudah sangat mengetahui bagaimana fungsi dan kegunaan id dan class selector pada CSS. Namun, tidak ada salahnya kita mengulas materi ini, baik untuk Anda yang baru belajar maupun Anda yang membutuhkannya sebagai referensi.

Pada pembahasan sebelumnya kita sudah belajar dasar-dasar CSS mulai dari pengenalan, bagaimana CSS bekerja sampai 3 cara penulisan CSS.

Bila Anda belum membacanya, silahkan klik Dasar-dasar CSS di sini.

Kita akan melanjutkan materi yaitu tentang Id dan Class Selector. Simak penjelasannya di sini:

Id dan Class Selector

Ada dua atribut yang cukup penting dalam membangun CSS, yaitu id dan class. Adapun penjelasannya sebagai berikut:

1# Atribut Id

Atribut id berguna untuk memberikan id unik pada sebuah elemen HTML. Atribut id harus unik pada setiap elemen HTML.

Secara penamaan boleh bebas, tetapi harus unik untuk masing-masing dokumen HTML.

Contoh file HTML yang menggunakan atribut id:

Lalu pada bagian style.css ditulis script sebagai berikut:

Hasilnya:

2# Atribut Class

Atribut class, berguna untuk memberikan type spesial untuk sebuah elemen HTML. Berbeda dengan id, penamaan class boleh bebas.

Atribute class tidak memberikan efek apa-apa pada elemen HTML tersebut. Hanya sekedar untuk memberi tanda bahwa elemen tersebut termasuk ke dalam class tertentu.

Lebih lanjut lagi, class tersebut merupakan class dari selector CSS yang akan digunakan untuk menerapkan style pada setiap elemen yg mengandung class tersebut.

Contoh file HTML yang menggunakan atribut class:

Lalu pada bagian style.css ditulis script sebagai berikut:

Hasilnya:

Selesai.

Happy Coding,

Saung IT