Sebelumnya kita sudah bahas cara penggunaan selector CSS. Kali ini kita akan bahas bagaimana urutan atau prioritas CSS yang ada antara inline style, internal style sheet, dan eksternal style sheet. Silakan simak panduan AneIqbal berikut sampai akhir.
Kali ini, kita akan bahas prioritas cara pemanggilan CSS, antara inline style, internal style sheet, atau eksternal style sheet, mana yang didahulukan. Style mana yang bakal terlihat di halaman webnya.
Urutan prioritas cara pemanggilan CSS
Urutan prioritas ini gunanya untuk mengatur cara pemanggilan CSS mana yang bakal diterapkan stylenya ke halaman web.
Kita langsung coba praktikkan.
Kita akan buat sebuah paragraf yang nantinya diberi style warna teks dengan cara inline style, internal style sheet, dan eksternal style sheet.. kita lihat mana yang bakal diterapkan ke halaman webnya.
Buat file prioritas-css.html.
<!DOCTYPE html>
<html>
<head>
<title> Prioritas cara pemanggilan CSS</title>
<link rel="stylesheet" href="prioritas-css.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ap%20%7B%0Acolor%3A%20green%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<p style="color:blue;">Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal..</p>
</body>
</html>
Lalu, file CSS nya: prioritas-css.css.
p {
color: red;
}
Kita bisa lihat dari kode di atas:
..di eksternal style sheet (file prioritas-css.css) kita beri style warna teksnya merah.
..di internal style sheet (kode CSS di tag <style>) kita beri style warna teksnya hijau.
..di inline style (kode CSS di tag <p> atribut style) kita beri style warna teksnya biru.
Warna apa yang bakal diterapkan?
Dan ini dia hasilnya:
Hasilnya, warna teksnya biru. Berarti cara inline style paling kuat di antara ke-3 cara di atas.
Oke, kita coba lagi. Kali ini kita hapus cara inline style-nya, mana yang lebih kuat antara internal style sheet dan eksternal style sheet.
Hapus atribut style di tag <p> pada kode html di atas menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<title> Prioritas cara pemanggilan CSS</title>
<link rel="stylesheet" href="prioritas-css.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ap%20%7B%0Acolor%3A%20green%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<p>Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal..</p>
</body>
</html>
Maka, hasilnya adalah.
Hasilnya ternyata warna hijau, karena posisi internal style sheet di bawah eksternal style sheet di dalam tag <head>.
Sekarang, kita coba balik posisinya: eksternal style sheet jadi dibawah internal style sheet.
Ubah kodenya jadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<title> Prioritas cara pemanggilan CSS</title>
<style>
p {
color: green;
}
</style>
<link rel="stylesheet" href="prioritas-css.css" />
</head>
<body>
<p>Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal..</p>
</body>
</html>
Maka hasilnya adalah.
Ternyata wara teksnya merah.
Itu artinya, inline style sheet dan eksternal style sheet sama kuatnya, tergantung posisinya, yang dibawah adalah yang paling kuat.
Jadi, kesimpulannya
Inline style sheet lebih kuat pengaruhnya dari internal style sheet dan eksternal style sheet.
Sedangkan..
..internal style sheet dan ekternal style sheet sama kuatnya, tergantung posisinya di dalam tag <head>.
Walaupun inline style sheet paling kuat, tetapi cara ini tidak disarankan, karena kode HTML akan terlihat tidak rapi. Bisa-bisa kita pusing melihat kodenya.
Cara yang disarankan adalah eksternal style sheet, karena kode CSS terpisah dari kode HTML. Lebih rapi kodenya.
Selesai sudah pembahasan kita kali ini tentang prioritas cara pemanggilan CSS. Pembahasan tadi adalah prioritas yang dilihat dari sumber kode CSSnya. Ada juga prioritas yang dilihat dari kode CSSnya.
Selanjutnya, kita akan bahas prioritas selector CSS.
