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:
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
h1 {
color: red;
}
<!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:
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.
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 :
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 :
<!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:
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.