Di dalam CSS, sebuah tag sanggup mempunyai lebih dari dari satu isyarat CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari isyarat CSS yang akan digunakan oleh tag HTML, atau dikenal dengan istilah Cascading.
Pengertian Cascading dari CSS
CSS yaitu abreviasi dari Cascading Style Sheet, dimana cascade dalam bahasa inggris sanggup berarti riam kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini yaitu style yang sanggup ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.
Mengenai kata �prioritas� untuk isyarat CSS, aku akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas ihwal prioritas atau urutan dari isyarat CSS kalau dilihat dari �sumber� isyarat tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas ihwal prioritas CSS dilihat dari kespesifikannya.
Efek Cascading menurut sumber isyarat CSS
Misalkan kita mempunyai sebuah tag header <h2>, kemudian ingin menciptakan isyarat CSS memakai external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada ketika yang sama kita juga menciptakan internel style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?
Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan isyarat CSS berikut:
h2 {
color:blue;
}
Lalu sebagai sample HTML, aku memakai prioritas.html, savelah kedua file pada folder yang sama:
<!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>
Perhatikan bahwa sebelum tag <style>, aku �memanggil� file prioritas.css terlebih dahulu. Lalu pada tag <h2> yang kedua aku menambahkan atribut �color:green� pada tag <h2>.
Jika kita menjalankan isyarat HTML diatas, warna text pada kedua tag <h2> akan bewarna merah dan biru, dan tidak ada yang bewarna biru.
Dari teladan sederhana diatas, tag <h2> bersama-sama �dikenakan� atau �diubah� oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu isyarat yang akan �menang�.
Dalam dilema �timpa-menimpa� ini, CSS mempunyai hukum prioritas tersendiri. Jika terdapat property CSS yang saling �bentrok�, maka urutan prioritasnya yaitu sebagai berikut (dari yang paling kuat):
- Inline style, yakni style yang eksklusif menempel pada tag.
- Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>)
- Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import
Maka kalau melihat sekali lagi isyarat HTML diatas, text �Akan berwana apa saya?..1� akan berwarna merah alasannya yaitu internal style color:red lebih menerima prioritas lebih tinggi daripada external style color:blue.
Sedangkan text �Akan berwana apa saya?..2� berwarna hijau alasannya yaitu inline style color:green lebih menerima prioritas daripada external style color:blue maupun internal style color:red.
Selain prioritas antar �sumber� isyarat CSS tersebut, proses cascading atau prioritas CSS juga masih berlanjut untuk isyarat CSS dalam file yang sama.
Sumber http://informasigameindo11.blogspot.com
EmoticonEmoticon