Mengenal CSS Selector lebih dekat lagi.

Melanjutkan tutorial yang pertama, kini kita akan mengenal selector yang ada pada CSS. Perhatikan kode css pada posting yang pertama. Dalam penulisan kode-kode CSS kita dikenalkan pada selector, dimana selector inilah yang akan mengantarkan format-format dalam file CSS tersebut kedalam dokumen HTML kita. Secara garis besar selector dibagi menjadi dua, yaitu:

Class dan ID Selector
Beda kedua jenis selector ini adalah cara penulisannya, bila kita ingin membuat Class selector maka gunakan tanda ”.” (titik) didepan nama class dan bila ingin mengunakan ID Selector kita dapat mengunakan tanda ”#” (pagar) setelah nama ID. Umumnya ID Selector lebih sering digunakan untuk memformat bagian yang hanya muncul satu kali saja. (cth: Top-menu, Main-menu, Left-menu, Background, dan lain-lain). Perbedaan cara penulisannya dapat dilihat seperti berikut ini.

Struktur ID Selector
#nama {
property: value;
}

Contoh penulisan:
#kolom {
color: blue;
font-size: 14px;
}

Struktur Class Selector
.nama {
property: value;
}

Contoh penulisan:
.kolom {
color: blue;
font-size: 14px;
}

Satu lagi kelebihan CSS adalah kita dapat merubah tampilan tag-tag HTML itu sendiri, baik itu untuk keseluruhan dokumen atau hanya bagian-bagian tertentu saja.

Untuk keseluruhan dokumen kita dapat menuliskan tag HTML tersebut sebagai penganti nama ID atau Class, tanpa “.” dan “#”. Struktur nya seperti berikut:

Tag-html {
property: value;
}

Contoh penulisan:
b {
Color: red;
}

Dan jika kita ingin memformat tag-html pada bagian-bagian tertentu saja, maka kita harus mengkombinasikan tag-tag html tersebut dengan ID dan Class selector, strukturnya akan terlihat seperti berikut (perlakuannya sama untuk ID dan Class):

#nama tag-html {
property: value;
}

Contoh penulisan:
#kolom b {
color: red;
Font size: 26px;
}

untuk yang satu ini penulisan dalam kode HTML harus ditulis dalam format seperti ini:
<div id=”kolom”><b>Semua tag b dalam bagian ini akan berwarna merah</b></div>

Untuk penulisan dalam file .css, kita dapat mengabungkan selector-selector yang memiliki format yang sama dengan cara meletakan koma ”,” diantara selector-selector itu.

Contoh kasus,
#kolom-kiri {
color: red;
font-size: 14px;
}

#kolom-kanan {
color: red;
font-size: 14px;
border: 1px solid #ccc;
}

Dapat kita lihat kedua ID memiliki property ”color” dan ”font-size” yang sama, maka dapat kita gabungkan keduanya untuk menghindari penulisan property yang sama tersebut. Penulisannya akan menjadi seperti berikut:

#kolom-kiri, #kolom-kanan {
color: red;
font-size: 14px;
}

#kolom-kanan {
border: 1px solid #ccc;
}

Penggabungan dapat juga dilakukan antar ID dan Class, misalnya seperti ini.
#kolom-kiri, #kolom-kanan, .isi, #bawah, #atas h1, .pinggir b {
Property: value;
}

Selesai sudah kita mengenal selector pada CSS, jika ada yang kurang mohon ditambahkan (^_^!), karna ini semua dari pengalaman saya selama ini meng-utak-atik kode-kode tersebut.