Tutorial CSS Untuk Pemula - Mengenal Macam-Macam Selector
Setelah kita mempelajari tentang cara memasukkan kode css kedalam file html pada tutorial sebelumnya, maka pada tutorial yang ketiga ini kita akan mempelajari tentang macam-macam selector.
Sebagaimana yang telah saya jelaskan pada tutorial yang pertama tentang mengenal apa itu CSS bahwa selector adalah bagian yang bertugas untuk mencari pola didalam file HTML yang ingin kita modifikasi. Pola yang bisa dicari oleh selector ini bermacam-macam, dan oleh karena itu selector ini akan dibagi penyebutannya berdasarkan pola yang akan dicari.
Tanpa "berpanjang-lebar" lagi, kita langsung saja mulai pembahasannya. Pastikan teks editor dan browser anda berfungsi dengan baik agar kita bisa mempraktekkan apa yang akan kita bahas nanti.
Silahkan anda buat terlebih dahulu sebuah folder didesktop anda dengan nama belajar_selector. Folder ini akan kita digunakan sebagai tempat untuk menyimpan file yang akan kita buat nanti. Dalam prakteknya nanti saya menuliskan kode CSS dengan menggunakan metode internal. Jika anda belum tau apa itu metode internal maka silahkan baca tutorialnya disini.
Macam-Macam Selector
Berdasarkan pola yang dicari, selector terbagi menjadi 4 macam, yaitu :
1. TAG atau ELEMENT SELECTOR
Tag atau Element Selector adalah selector yang berfungsi untuk mencari pola berupa Tag atau Element didalam file HTML yang akan dimodifikasi. Contoh:
<html>
<head>
<title>Belajar Macam-Macam Selector</title>
<style>
th {
background-color : black;
color : white;
padding : 10px;
}
td {
background-color : green;
color : white;
padding-bottom: 30px;
padding-top:30px;
text-align: center;
}
b {
background-color : black;
}
</style>
</head>
<body>
<table border="3">
<tr>
<th>Ini adalah kolom judul yang sudah dimodifikasi</th>
</tr>
<tr>
<td><b>Ini adalah kolom isi yang sudah dimodifikasi</b></td>
</tr>
</table>
</body>
</html>
Silahkan anda ketik atau copy-paste kedalam teks editor anda (buat file baru) dan simpan didalam folder belajar_selector yang kita buat tadi dengan nama tag_element_selector.html lalu jalankan di browser anda. Kira-kira seperti inilah hasil yang didapatkan :
Tag atau Element HTML <th> , <td> dan <b> berubah sesuai apa yang kita perintahkan.
Sebenarnya, jika anda mengikuti semua tutorial yang saya berikan dari awal, maka seharusnya anda sudah sangat familiar dengan selector jenis ini, karena selector inilah yang sering kita gunakan sebagai contoh pada tutorial-tutorial sebelumnya.
2. ID Selector
ID Selector adalah selector yang berfungsi untuk mencari Tag atau Element HTML berdasarkan atribut id yang dimilikinya. Dalam penulisannya, selector ID ini harus diawali tanda pagar [#] sebelum menuliskan ID yang dimaksud. Untuk lebih jelasnya silahkan anda ketik atau copy-paste kode dibawah ini kedalam teks editor anda (buat file baru) :
<html>
<head>
<title>Belajar Macam-Macam Selector</title>
<style>
#col_a {
background-color : purple;
color : yellow;
padding : 10px;
padding-top:10px;
text-align: left;
}
#col_b {
background-color : green;
color : yellow;
padding : 10px;
padding-top:20px;
text-align: center;
}
#col_c {
background-color : red;
color : white;
padding : 10px;
padding-top:30px;
text-align: right;
}
</style>
</head>
<body>
<table border="3">
<tr>
<td id="col_a"><b>ini adalah kolom pertama yang memiliki id "col_a"</b></td>
<td id="col_b"><b>ini adalah kolom kedua yang memiliki id "col_b"</b></td>
<td id="col_c"><b>ini adalah kolom ketiga yang memiliki id "col_c"</b></td>
</tr>
</table>
</body>
</html>
Kemudian simpan didalam folder belajar_selector dengan nama id_selector.html lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :
Setiap kolom dimodifikasi sesuai IDnya masing-masing.
3. Class Selector
Class Selector adalah selector yang berfungsi untuk mencari Tag atau Element HTML berdasarkan atribut Class yang terdapat didalamnya. Dalam penulisannya, selector Class ini harus diawali tanda titik [.] sebelum menuliskan Class yang dimaksud. Nama-nama class yang digunakan bebas terserah kita. Untuk lebih jelasnya silahkan anda ketik atau copy-paste kode dibawah ini kedalam teks editor anda (buat file baru) :
<html>
<head>
<title>Belajar Macam-Macam Selector</title>
<style>
.rata-tengah {
padding : 10px;
padding-top:30px;
text-align: center;
}
.kolom-kecil {
background-color : red;
color : white;
width : 10%;
}
.kolom-sedang {
background-color : green;
color : #bbeefd;
width : 30%;
}
.kolom-besar {
background-color : yellow;
color : green;
width : 60%;
}
</style>
</head>
<body bgcolor="#aeffae">
<h1 class="rata-tengah"><b>INI ADALAH CONTOH HASIL CLASS SELECTOR</b></h1>
<br>
<table border="3">
<tr>
<td class="rata-tengah kolom-kecil"><b>ini adalah kolom pertama yang memiliki class "kolom-kecil"</b></td>
<td class="rata-tengah kolom-sedang"><b>ini adalah kolom kedua yang memiliki class "kolom-sedang"</b></td>
<td class="rata-tengah kolom-besar"><b>ini adalah kolom ketiga yang memiliki class "kolom-besar"</b></td>
</tr>
</table>
</body>
</html>
Kemudian simpan didalam folder belajar_selector dengan nama class_selector.html lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :
Perhatikan nama Class yang saya buat. Pada masing-masing kolom saya menuliskan dua nama Class yang dipisahkan dengan spasi yaitu Class rata-tengah dan kolom-(kecil/sedang/besar). Lalu pada kode CSSnya saya menuliskan deklarasi atau perintah pada selector class .rata-tengah untuk mengatur padding atau jarak didalam kolom dan text-align yang mana deklarasi atau perintah tersebut ingin saya terapkan pada masing-masing kolom. Sebenarnya jika deklarasi atau perintahnya hanya digunakan untuk kolom maka kita tidak perlu membuat nama Class rata-tengah, cukup kita gunakan saja Tag atau Element Selector untuk mengatur Tag atau Element HTML <td>, akan tetapi pada contoh diatas nama Class rata-tengah tidak hanya digunakan untuk kolom tapi juga untuk judul diatasnya sehingga hasilnya seperti gambar diatas.
4. Universal Selector
Universal selector adalah selector yang berfungsi mengubah seluruh Tag atau Element yang terdapat didalam suatu file HTML. Untuk menggunakan selector universal kita hanya perlu menuliskan simbol bintang [*] pada kode css yang kita ingin terapkan. Untuk lebih jelasnya silahkan anda ketik atau copy-paste kode dibawah ini kedalam teks editor anda (buat file baru) :
<html>
<head>
<title>Belajar Macam-Macam Selector</title>
<style>
* {
color : green;
font-weight: bold;
font-size: 30px;
margin : 10px;
margin-top :10px;
margin-bottom :10px;
text-align : center;
padding : 30px;
}
</style>
</head>
<body>
Semua Tag atau Element HTML akan berubah dengan tulisan berwarna hijau, tebal dan besar
<br>
<br>
<i>ini Tag atau Element HTML italic</i>
<br>
<br>
<b>ini Tag atau Element HTML bold</b>
<br>
<p>ini Tag atau Element HTML paragraf</p>
<br>
<font>ini Tag atau Element HTML bold</font>
<br>
<br>
<table border="3">
<tr>
<td>ini kolom satu</td>
<td>ini kolom dua</td>
<td>ini kolom tiga</td>
</tr>
</table>
</body>
</html>
Kemudian simpan didalam folder belajar_selector dengan nama universal_selector.html lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :
Semua Tag atau Element HTML yang ada berubah sesuai dengan deklarasi atau perintah yang kita tuliskan diatas.
Tambahan
Terkadang dalam membuat kode CSS kita menuliskan beberapa deklarasi yang sama untuk beberapa selector yang berbeda, contohnya seperti ini :
h1 {
color : green;
text-align : center;
font-size : 30px;
}
h2 {
color : green;
text-align : center;
font-size : 30px;
}
h3 {
color : green;
text-align : center;
font-size : 30px;
}
Pada contoh kode CSS diatas saya menuliskan 3 deklarasi atau perintah, dan dua diantaranya merupakan deklarasi atau perintah yang sama persis yaitu color dan text-align. Maka untuk menghemat tempat, waktu, tenaga dan biaya kita bisa menggabungkan selectornya menjadi seperti ini :
h1 {
font-size : 30px;
}
h2 {
font-size : 30px;
}
h3 {
font-size : 30px;
}
h1, h2, h3 {
color : green;
text-align : center;
}
Selector yang memiliki deklarasi yang sama kita gabungkan dalam satu baris kode CSS dengan memberikan tanda koma [,] sebagai pemisah antara selector yang satu dengan yang lain lalui kita tuliskan deklarasi atau perintah yang sama tersebut. Adapun deklarasi atau perintah yang berbeda maka ditulis secara tersendiri dan tidak bisa digabungkan.
Coba ketikkan atau copy-paste kode dibawah ini kedalam teks editor anda (buat file baru), kemudian simpan dengan nama group_selector.html didalam folder belajar_selector yang kita buat tadi.
<html>
<head>
<title>Belajar Macam-Macam Selector</title>
<style>
h1 {
font-size : 50px;
}
h2 {
font-size : 40px;
}
h3 {
font-size : 30px;
}
h1, h2, h3 {
color : green;
text-align : center;
margin-top : 20px;
}
</style>
</head>
<body>
<center>Perhatikan warna ketiga heading dibawah ini, semuanya memiliki color, text-align, dan margin-top yang sama</center>
<h1> Ini Heading Satu </h1>
<h2> Ini Heading Dua </h2>
<h3> Ini Heading Tiga </h3>
</body>
</html>
Kemudian jalankan dibrowser, maka hasilnya kira-kira seperti ini :
Nah itulah macam-macam selector terdapat didalam CSS yang bisa kita gunakan sesuai kebutuhan kita.
Bagaimana? Sangat mudah untuk dipahami bukan?
Alhamdulillah sekarang bertambah lagi ilmu yang kita miliki tentang CSS.
Setelah ini in sya aLLAH kita akan mulai membahas satu persatu Property yang terdapat dalam CSS beserta Value yang bisa gunakan padanya.
Pastikan anda sudah membaca dan memahami semua tutorial yang sudah saya bagikan.
Cukup sampai disini dulu penjelasan dari saya tentang Tutorial CSS Untuk Pemula - Mengenal Macam-Macam Selector pada kesempatan kali ini. Untuk membaca tutorial selanjutnya silahkan klik : Tutorial CSS Untuk Pemula - Belajar Warna Dalam CSS.
Semoga bermanfaat.