2. MACAM-MACAM SELECTOR
Apa itu selector??
Selector adalah salah satu metode untuk mengelompokkan syntax, yang didalamnya terdapat property dan
value yang akan berpengaruh terhadap tampilan halaman web yang akan kita buat.
Aturan penulisan kodenya kurang lebih seperti ini.
Selector{ properties:value;}
Property dan value diletakan di dalam tanda kurung kurawal ({…}) dan selector diletakan diluar kurung
kurawal. Selain itu, property dan value dipisahkan dengan tanda titik dua (:) dan setiap statement(property:value)
harus diakhiri dengan tanda titik koma (;). Namun jika statemennya hanya satu, tanda titik koma bisa dihilangkan
karena tanda tutup kurung kurawal bisa berfungsi juga sebagai tanda titik koma. Bingung gak? hehehehe
Supaya tidak bingung, sekarang kita buat contohnya. Andai, sobat ingin membuat aturan yang sederhana seperti
merubah warna tulisan dalam heading1 (di dalam tag <h1> dan </h1>). Maka sobat harus mendefinisikan aturan di
dalam css sebagai berikut :
h1{
color:red;
text-align:center;
}
Maka isi dari halaman html yang merupakan heading 1 akan mempunyai tampilan tulisan berwarna merah
dengan posisi center.
Macam-macam Selector
Vera Safitri|1206655
3. Macam-macam Selector
Macam-macam selector itu ada banyak, tapi yang akan dibahas disini ada 3:
1. Universal selector
2. Id selector
3. Class selector
1. Universal selector
Universal selector yang dimaksud disini adalah selector yang menggunakan tanda *. Contoh kode CSS:
.Syntax:
*{
Property:value;
}
Contoh:
*{
font-family:Verdana;
}
Tanda * (asterisk) mengacu pada semua element. Jadi, pada blok kode yang pertama bisa berarti
“semua teks didalam body akan ditampilkan dengan font Verdana“.
2. Class Selector
Class Selector digunakan jika kita ingin mengatur tag HTML dengan beberapa properti yang berbeda dan akan
digunakan secara berulang - ulang (lebih dari sekali),adapun penamaan class selector terserah pada pembuatnya.
Seperti halnya kode CSS lainnya, Class Selector ditulis diantara kode <head> dan </head> yang diawali dengan <style>
dan diakhiri dengan </style> dimana cara penulisan Class Selector diawali dengan tanda titik (.) dengan format:
syntax:
.nama-class {property:value;}
Contoh: misal penulisan Class Selector untuk mengatur format ratatengah:
.tengah {text-align:center;}
Penggunaan class selector:
Cara menggunakan class selecor untuk menampilkan target dalam halama web/blog. adapun penempatannya
adalah pada kode HTML di antara <body>dan </body>. Termasuk dapat digunakan dalam post editor dengan mode
HTML dan widget dengan konfigurasi HTML
Macam-macam Selector
Vera Safitri|1206655
4. Untuk penggunaan class selector di luar kode HTML, maka menggunakan tag <div class="nama-class"> dan di
akhiri dengan tag</div>. Contoh, misalnya untuk menampilkan class selector untuk mengatur rata tengah
diatas maka codenya:
<div class="tengah">
........
</div>
3. ID Selector
Secara umum Penggunaan maupun cara penulisan ID Selector hampir sama dengan class selector, yang
membedakannya adalah:
•
•
Penggunaan ID biasanya lebih spesifik untuk memformat bagian yang hanya muncul satu kali dalam satu halaman
web, misalnya untuk memformat bagian menu / sidebar.
Penulisannya diawali dengan menggunakan tanda pagar (#) berbeda dengan Class yang menggunakan tanda titik(.)
Penggunaan class selector:
Cara menggunakan class selecor untuk menampilkan target dalam halama web/blog. adapun penempatannya
adalah pada kode HTML di antara <body>dan </body>. Termasuk dapat digunakan dalam post editor dengan mode
HTML dan widget dengan konfigurasi HTML. Untuk penggunaan ID selector di luar kode HTML, maka menggunakan
tag <div ID="nama-class"> dan di akhiri dengan tag</div>. Contoh, misalnya untuk menampilkan ID selector untuk
mengatur header maka codenya:
<div ID="header">
........
</div>
Macam-macam Selector
Vera Safitri|1206655
5. Misalkan kita ingin membuat tampilan seperti ini
Macam-macam Selector
Vera Safitri|1206655
6. Maka Code nya seperti ini:
Macam-macam Selector
Vera Safitri|1206655
