Oleh : Muhammad Luqni Baehaqi
Mengenal CSS Lebih Jauh
Mengenal Jenis-jenis Selector CSS
CSS memiliki jenis selector yang bervariasi tergantung kebutuhan dalam mendesain halaman web. Kali ini kita akan membahas 5 jenis selector.
Sebelumnya kita review ulang tentang selector. Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag dalam HTML.
Berikut jenis jenis selector
Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.
contoh Universal Selector CSS :
* {
color: blue;
background-color: white;
}
Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan background berwarna putih.
Element Type Selector
Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.
contoh Element Type Selector CSS :
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
Kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah dan seluruh tag <p>, akan berukuran 14 pixel.
Efek dari element type selector adalah dari awal tag sampai akhir tag. Jika di dalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p>.
Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class.
contoh Class Selector pada tag HTML
<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>
<h1 class=”judul”>Judul Artikel</h1>
<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>
Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contoh dalam baris terakhir pada contoh diatas, tag h2 memiliki atribut class=”judul penting berwarna”. Tag ini terdiri dari 3 class, yaitu judul, penting dan class berwarna.
Contoh Kode CSS Class Selector
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px;
}
.penting {
color:red;
font-size: 1em;
}
Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda titik sebelum nama dari class.
Kode CSS di atas akan membuat class yang memiliki nilai ‘pragraf_pertama’, warna text akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
ID Selector
ID Selector dan Class Selector merupakan selector paling umum dan juga sering digunakan. Penggunaan ID Selector hampir sama dengan Class Selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID Selector, kita menggunakan atribut id.
Contoh ID Selector pada tag HTML
<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>
<h1 id=”judul_utama”>Judul Artikel</h1>
<h2 id=”sub_judul”>Sub Judul Artikel</h2>
Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode javascript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.
Contoh Kode CSS ID Selector
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px;
}
Untuk menggunakan ID Selector, di dalam CSS kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.
Attribut Selector
Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.
Contoh Kode CSS Attribut Selector
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara kurung siku “[“ dan “]”.
[href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.
Urutan Prioritas Selector CSS (Cascading)
Cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.
Mengenai kata “prioritas” untuk kode CSS, dibagi menjadi 2 yaitu prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut (inline style CSS, internal style sheet, external style sheet) dan prioritas CSS dilihat dari kespesifikannya.
prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode
Contoh kasus, misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada saat yang sama kita juga membuat internal style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?
Untuk mengujinya, mari kita coba secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikan kode CSS berikut :
h2 {
color:blue;
}
Lalu sebagai sample HTML. kita buat file nya dengan nama prioritas.html, ketikan kode HTML berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Cascading CSS</title>
<link rel="stylesheet" type="text/css" href="prioritas.css">
<style type="text/css">
h2 {
color:red;
}
</style>
</head>
<body>
<h2>
Akan berwarna apa saya?..1
</h2>
<h2 style="color:green">
Akan berwarna apa saya?..2
</h2>
</body>
</html>
maka hasilnya akan tampil di browser seperti ini :
Dari contoh sederhana diatas, tag <h2> sebenarnya di ubah oleh 3 property CSS yang sama secara bersamaan, yakni 3 selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu kode yang akan menjadi ‘pemenang’.
Dalam masalah ‘timpa-menimpa’ ini, CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling ‘bentrok’, maka urutan prioritasnya adalah sebagai berikut (dari yang paling kuat) :
Inline style, yakni style yang langsung melekat pada tag.
Internal style, yakni style yang dideklarasikan pada awal halaman
External style, yakni style yang dideklarasikan pada sebuah file .css dan dipanggil melalui tag <link> atau @import
prioritas CSS dilihat dari kespesifikannya
Jika pada sebelumnya urutan prioritas kode CSS dipengaruhi kode sumber css nya dimana Inline style merupakan yang terkuat. Bagaimana jika seluruh kode CSS berada dalam satu file ?.
Dalam kasus ini kita akan mempelajari apa yang terjadi jika beberapa kode CSS yang dibuat saling menimpa dan berada dalam satu file atau satu sumber. Urutan prioritasnya akan seperti apa? Simak contoh kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red;
}
div p {
color:green;
}
#aaa{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="aaa">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Sebelum kita melihat hasil tampilannya di browser, coba perhatikan terlebih dahulu definisi CSS diatas. Terdapat 5 jenis selector yang mencoba untuk merubah warna sebuah paragraf. Dan silahkan tebak warna apa yang akan tampil di browser..
Dan seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS “#aaa” adalah tempat pendefinisian warna “color:orange”, namun bagaimana ini bisa terjadi? bagaimana dengan ke - 4 definisi lainnya?
Jawabannya : karena selector #aaa dianggap paling spesifik atau paling detail dari ke - 5 selector lainnya.
2.1 Cara Menghitung ke-Spesifik-an Selector CSS
CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.
Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contoh : 0,1,0,0.
perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5 atau agar lebih mudah nilai 0,1,0,0 bisa ditulis menjadi 0100 dan nilai 0,0,1,5 menjadi 0015.
Berikut adalah nilai Specifity untuk selector di dalam CSS :
Setiap elemen/tag selector bernilai 0,0,0,1
Setiap class selector, attribut selector bernilai 0,0,1,0
Setiap ID selector bernilai 0,1,0,0
Setiap inline style bernilai 1,0,0,0
Dengan menggunakan aturan tersebut, mari kita hitung angka ke-spesifik-an dalam contoh sebelumnya.
Selector p, hanya terdiri dari 1 tag selector, maka nilainya : 0,0,0,1
Selector div p, terdiri dari 2 tag selector, maka nilainya : 0,0,0,2
Selector #aaa, terdiri dari 1 ID selector, maka nilainya : 0,1,0,0
Selector body div p, terdiri dari 3 tag selector, maka nilainya : 0,0,0,3
Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya : 0,0,1,2
Dari hasil yang kita peroleh, maka selector #aaa memiliki nilai paling tinggi, yaitu 0,1,0,0. Maka dari itu kalimat yang muncul akan berwarna orange
Mengenal Perintah !important
Jika aturan prioritas tidak cukup, CSS menyediakan “senjata” pamungkas, yaitu menggunakan perintah !important.
Perintah !important diletakkan dibelakang property dari CSS, dan perintah !important ini akan mengambil alir urutan prioritas CSS yang kita pelajari diatas. Coba perhatikan kode di bawah ini, kita akan tambahkan !important dalam file spesifik.html yang sudah kita buat sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS !important</title>
<style type="text/css">
p {
color:red; !important;
}
div p {
color:green;
}
#aaa{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="aaa">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Di sini kita hanya menambahkan perintah !important diakhir property, dan seperti ini hasil tampilannya .
Paragraf kita sekarang berwarna merah.
Dalam CSS, bisa dikatakan bahwa perancangan kode CSS sebenarnya lebih condong ke seni (art) daripada pemograman. Karena selain memikirkan bagaimana tampilan web, kita juga harus memperharikan aturan prioritas dan ke-spesifik-an CSS dan mengkombinasikannya untuk membuat tampilan website yang indah.
--Sekian Terimakasih--
Emoticon