CSS Prioritas
CSS adalah singkatan dari Cascading Style Sheet yang berarti style dapat ditimpa atau menimpa style lain berdasarkan urutannya. Dalam pembahasan ini prioritas CSS akan kita bahas menjadi 2 bagian yaitu:
- Berdasarkan Sumber
- Berdasarkan Spesifikasi
BERDASARKAN SUMBER
Jika berasal dari sumbernya,maka kita bicara tentang manakah yang lebih dulu diprioritaskan apabila ada dua kode CSS yang dimasukkan ke dalam HTML lewat dua metode yang berbeda.Sebagai contoh,kita menuliskan tag dan ingin membuat kode CSS menggunakan external style sheet untuk mengubah agar tag menjadi berwarna merah, namun pada saat yang sama, kita juga membuat internal style sheet untuk mengubah tag yang sama yaitu menjadi warna hijau, dengan kondisi seperti ini, manakah yang dipilih browser ketika tag digunakan ?
Agar anda lebih mudah untuk memahaminya perhatikanlah contoh dibawah ini. Buatlah file dengan nama style.css kemudian import ke dalam HTML seperti contoh dibawah ini
Contoh External CSS (style.css)
h1 {
color: red;
}
Contoh Halaman HTML(index.html)
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Prioritas</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
h1 {
color:green;
}
</style>
</head>
<body>
<h1>Jadi mana style yang terpilih?</h1>
</body>
</html>
Kedua contoh diatas harus anda letakkan di folder yang sama agar style.css ke load. Pada contoh di atas, tag <h1> berusaha untuk diubah warnanya dengan menggunakan CSS dari file style.css yang ingin mengganti warna h1 menjadi merah, kedua dengan menggunakan kode CSS yang ada diantara tag <style> dan </style> (Internal Style) dengan warna hijau. Ketika ditampilkan di browser, maka warna hijau yang akan ditampilkan, kenapa bisa begitu?
Karena jika ada kejadian seperti contoh di atas, maka berlaku aturan prioritas tersendiri yaitu:
- CSS yang dimasukkan dengan metode Inline Style yaitu style yang langsung melekat pada tag dalam tag <body> akan diprioritaskan terlebih dahulu
- CSS yang dimasukkan denan metode Internal Style Sheet yaitu style yang dideklarasikan pada awal halaman di antara tag <style> dan </style> akan diprioritaskan selanjutnya
- CSS yang dimasukkan menggunakan metode External Style Sheet ,yaitu style yang dideklarasikan pada sebuah file terpisah yang berekstensi .css akan diprioritaskan terakhir.
Dari contoh di atas ,maka tidak aneh jika teks "Jadi mana style yang terpilih?" akan berwarna hijau karena metode Internal Style Sheet lebih mendapat prioritas daripada metode External Style Sheet.
BERDASARKAN SPESIFIKASI
CSS memiliki aturan tertentu tentang pengaturan prioritas berdasarkan spesifikasi selector aturan tersebut diatur dengan menggunakan formula 4 digit misalnya 0,0,0,0, cara untuk memahaminya adalah sebagai berikut :
- 4 digit angka ini sama dengan bilangan matetmatika,seperti 0,0,0,1 dan 0,0,1,0 maka yang lebih besar adalah 0,0,1,0. Begitu juga jika ada formula antara 0,0,1,0 dan 0,1,0,0 maka yang lebih besar adalah 0,1,0,0.
- Setiap element atau tag selector memiliki nilai 0,0,0,1
- Setiap class selector dan atribut selector memiliki nilai 0,0,1,0
- Setiap ID Selector memiliki nilai 0,1,0,0
- Setiap Inline Style memiliki nilai 1,0,0,0
Selanjutnya kita akan bahas urutan prioritas kode CSS jika seluruh kode CSS ditulis di dalam satu file yang sama ,tetapi dengan jenis-jenis selector yang berbeda.Ketikkan kode HTML di bawah ini :
Contoh Prioritas CSS
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Prioritas</title>
<style type="text/css">
p {
color: aqua;
}
div p {
color: blue;
}
#teks {
color: red;
}
body div p {
color: yellow;
}
div p.kalimat {
color: green
}
</style>
</head>
<body>
<h1>Teks ini berwarna apa?</h1>
</body>
</html>
Pada code CSS di atas kita menggunakan 5 selector, akan tetapi yang dipanggil dalam tag hanyalah selector #teks karena dalam pemrograman CSS, selector yang paling diprioritaskan adalah selector id (#teks). Berikut penjelasan lebih lanjutnya, perhatikan contoh kode CSS dan aturan pemahaman urutan kode CSS di atas:
- p {color: aqua;} : untuk selector p di bawah ini hanya terdiri dari 1 tag yaitu tag.Oleh karena itu nilainya : 0,0,0,1
- div p {color: blue;} : untuk selector div p terdiri dari 2 tag yaitu div dan p.Oleh karena itu nilainya : 0,0,0,2
- #teks {color: red;} : untuk Id Selector terdiri dari 1 ID.Dan karena berjenis ID Selector maka nilainya lebih tinggi yaitu 0,1,0,0
- body div p {color: yellow;} :untuk selector body div p terdiri dari 3 tag selector.Oleh karena itu nilainya 0,0,0,3
- div p.kalimat {color: green} : untuk selector div p.kalimat terdiri dari 2 tag selector (div dan p) dan satu class selector (kalimat) sehingga nilainya 0,0,1,2
Dari penjelasan di atas makka terlihat jika ID Selector #teks memiliki nilai yang paling tinggi sehingga lebih diprioritaskan.
Sampai disini dulu tutorial CSS dari saya nantikan tutorial selanjutnya, Semoga tutorial ini bermanfaat bagi anda, atas segala kekuranganya mohon dimaafkan dan jika ingin bertanya silahkan tinggalkan komentar.
Like, share & komen untuk dukung terus website ini agar terus berkembang, terimakasih.
