Belajar CSS Part 2 - Selector dan Komentar

Assalamu'alaikum warohmatullaahi wabarokatuh.

Kali ini kita akan mempelajari tentang selector dan komentar dalam CSS. Tentang apa itu selector sudah kami bahas pada Belajar CSS Part 1 tentang Pengenalan dan Sintaks Dasar CSS. Sedangkan komentar, tidak berbeda fungsinya dengan komentar pada HTML, yaitu agar sebuah script tidak diproses oleh browser. Yang berbeda hanya dari segi cara penyisipannya saja.

A. SELECTOR

1. Element Selector 

Element Selector digunakan untuk memilih elemen biasa yang akan digunakan untuk menyeleksi elemen biasa. Lebih jelanya kita simak contoh berikut ini :

p { font-size:12px;}

Yang menjadi element selector di sana adalah p. Dengan demikian semua tag <p> pada dokumen HTML yang disisipi file CSS tersebut akan memiliki font-size atau ukuran font 12 pixel.

2. Id Selector

Id selector digunakan untuk menyeleksi elemen yang telah diberi atribut id tertentu. id selector ditandai dengan tanda pagar(#). Contoh :

#paragrafkhusus {font-size:16px;}

Dengan id selector di atas sebuah elemen yang diberi id paragrafkhusus akan memiliki ukuran font 16 pixel.

Coba sendiri di sini

3. Class Selector

Class Selector akan menyeleksi elemen dalam sebuah dokumen HTML dengan class tertentu. Untuk mempelajari tentang Class pada HTML, Anda bisa membaca artikel pada link ini. 

Perbedaan id dengan class adalah, id hanya bisa digunakan satu kali di setiap halaman HTML, sedangkan class bisa digunakan berkali-kali dalam sebuah file HTML. 

Class Selector ditandai dengan tanda titik(.). Contoh :

.paragraftertentu {font-size:14px;}

Dengan script di atas, maka setiap elemen yang diberi class paragraftertentu akan memiliki font dengan ukuran 14 pixel.

Coba sendiri di sini

4. Pengelompokan selector

Jika beberapa elemen, class, ataupun id memiliki declaration yang sama, maka kita bisa mengelompokkannya dengan memberi koma(,) sebagai pemisah masing-masing elemen. Contoh :

h1, h2, p {

text-align : center;

color : red;

}

Dengan script di atas, semua elemen <h1>, <h2>, dan <p> pada sebuah file HTML akan rata tengah dan memiliki teks berwarna merah.

Coba sendiri di sini

B. KOMENTAR

Komentar pada CSS dimulai dengan tanda slash dan bintang (/*) dan diakhiri dengan bintang dan slash (*/). Contoh : 

/* ini adalah komentar 

komentar tidak akan diproses oleh browser, 

namun akan mempermudah pembuat script*/

p {text-align:center;}

Coba sendiri di sini

Demikian Seri Belajar CSS tentang Selector dan Komentar. Semoga bermanfaat.
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.