Mungkin agak berantakan ya blog ini, karena postingan tentang CSS yang pertama kali saya unggah bukan postingan CSS yang lebih dasar daripada tulisan ini. Tapi kebetulan hari ini saya menemukan ulasan mengenai CSS yang sangat menarik dari blognya Kang Tanto. Semoga kedepannya blog saya ini dapat saya tulisi (baca: kopas-i) juga dengan tulisan-tulisan tentang HTML dan CSS lebih lengkap. Begini kira-kira penjelasan penggunaan ID dan Class versi Kang Tanto:
Sebelum anda melanjutkan membaca tulisan ini, pastikan anda telah memahami dasar-dasar penulisan syntax css, anda bisa melihat pada artikel sebelumnya tentang pengenalan css. Pada tulisan kali ini targetnya anda akan mampu memahami dan selanjutnya menggunakan ID dan Class pada CSS.
Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.
Selector ID
Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
Contoh selector ID
Selector ID
Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
Contoh selector ID
1 | #par1 |
2 | { |
3 | text-align:center; |
4 | color:red; |
5 | } |
Pada bagian dokumen HTML, untuk menggunakan style tersebut, misalnya pada sebuah paragraph, bisa dituliskan:
1 | <p id="par1">Ini adalah sebuah paragraph</p> |
Penulisan nama id sebaiknya tidak diawali dengan nomor, karena tidak akan dikenali pada browser Mozilla Firefox
Selector Class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh selector class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh selector class
1 | .komentar |
2 | { |
3 | text-align:left; |
4 | color:red; |
5 | } |
Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan
1 | <p class="komentar"> Ini adalah paragraph komentar </p> |
1 | <div class="komentar">Ini bagian komentar</p> |
Bagian mana saja dari sebuah dokumen html yang memanggil class ini, akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan akan berada di tengah dan berwarna merah. Pada kondisi lain, kita menginginkan apabila sebuah class hanya berlaku pada sebuah paragraph saja. Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai berikut:
1 | p.komentar {text-align:center;} |
Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki class=”komentar” saja.
Cukup sampai disini tulisan kali ini, berikutnya akan dilanjutkan dengan 3 cara memasukkan dokumen css ke dalam halaman web anda. Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…
