Dasar-dasar CSS 2

Melanjutkan pembahasan dasar-dasar CSS yang lalu, kali ini saya ingin membahas tentang selector. Tetapi sebelum kita menuju bahasan utama, ada baiknya kita berbasa-basi dulu. Ibarat lagu, jangan langsung ke reffrainnya.

Ok, kita mulai basa-basinya. Saya membuat blog baru, bertajuk "Tips N' Trik Blogging". Jangan lupa ya kunjungi di alamathttp://tipntrikblogging.blogspot.com/. Maklum masih baru jadi belum ada tutorialnya sama sekali. Tapi saya mengundang 10 orang untuk menjadi guest blogger. Silahkan kirim saya E-mail (di link E-mail me), lalu anda akan menerima E-mail dari Blogger, silakan ikuti langkah-langkah selanjutnya.

Sudah cukup basa-basinya, sekarang kita ke bahasan pokok. Ada beberapa macam sselector. Diantaranya:

1. Class selector

Class selector adalah selector yang boleh diulang-ulang, dan cara penulisannya dengan cara menambahkan tanda titik (.) diikuti dengan nama classnya. Contoh:

.namaclass{color:blue}

Dan cara pengaplikasiannya adalah dengan menggunakan atributclass="...". Contoh:

Ini adalah teks biasa.

Ini adalah teks dengan class selector "namaclass".

2. ID selector.

ID selector adalah selector yang hanya bisa dipakai untuk satu elemen, dengan kata lain, tidak boleh diulang-ulang. Cara penulisannya adalah dengan menuliskan tanda kres/pagar (#) sebelum nama selector. Contoh:

#namaid{background:black;color:white;}

Lalu cara pengaplikasiannya adalah dengan menambahkan atributid="...". Contoh:

Ini adalah teks biasa.

Ini adalah teks dengan id selector "namaid".

3. Tag selector

Tag selector adalah selector yang diaplikasikan kepada tag yang menjadi nama selectornya. Contoh:

body{background:black;}

Anda tidak perlu menambahkan atribut tertentu untuk membuatnya bekerja karena secara otomatis akan diaplikasikan kepada tag yang dijadikan nama selectornya. Pada contoh diatas, berarti tag akan berlatar belakang hitam. Secara lengkap seperti ini.

Body akan berlatar belakang hitam.

4. Pseudo class

Ada beberapa pseudo class. Yaitu:

• active: Properti untuk link/sesuatu yang sedang diklik.
• hover: Properti untuk link/sesuatu ketika kursor mouse berada di atasnya.
• visited: Properti untuk link yang sudah dikunjungi.

Cara menulisnya adalah:

(tag/id/class selector):pseudo class{properti:nilai;}

Contoh:

Link 1

Link 2

Link 3

Ini adalah teks dengan class "contohcss".

Ini adalah teks dengan id "contohcss2".

Catatan:

Pada Internet Explorer, pseudo class dengan selector selain a tidak didukungnya.

Kontekstual selector

Kontekstual selector adalah kondisi dimana selector akan diaplikasikan kepada selector yang konteksnya tepat (nggak mudeng yak? bingung juga...). Contoh:

b i{color:blue;}

Contoh lengkapnya:

Warna teks ini akan biru

Warna teks ini akan hijau

Warna teks ini akan ungu

Warna teks ini akan jingga

yang ini akan biru kecuali yang ini yang tadi berwarna ungu

Warna latar belakang akan hijau

Nah, kalau yang ini akan berwarna ungu

Yang ini? berwarna kuning

Kembali ke warna ungu lagi latar belakangnya

Bingung ya? Semoga saja mudah dipahami. Pada tutorial berikutnya saya akan membahas tentang beberapa properti dalam CSS. Semoga bermanfaat!