Arti Cascading dalam CSS
Kembali kepada singkatan CSS yaitu Cascading Style Sheet. Cascading memiliki induk kata cascade dalam bahasa Inggris. Jika diterjemahkan hasilnya adalah ' air terjun'. Dalam CSS Cascading dipahami sebagai 'terjun' atau penimpalan aktivasi kode CSS. Dalam artian sederhana jika ada dua mana yang lebih diutamakan. Dalam koding CSS ini sering disebut prioritas CSS.Dalam CSS terdapat 2 jenis prioritas. Yang pertama Cascading sebagai mana yang kita bahas sekarang. Selanjutnya ada dikenal dengan istilah Specificity CSS. Bisa dibaca pada artikel terkait : Specificity dalam CSS.
Pada cascading ini akan dilihat mana yang diprioritaskan kode CSS apabila terdapat dari sumber kode tersebut. Sumber kode yang dimaksud adalah external style sheet, internal style sheet dan inline style sheet CSS.
Cascading berdasarkan sumber kode CSS
Agar lebih mudah kita ilustrasikan sebagai berikut. Kita memiliki tag <h2>, dengan menggunakan external sheet tag di defenisikan dengan value biru. Namun dalam waktu yang sama, juga dibuat internal style sheet dengan memberi value merah. Sekarang akan muncul pertanyaan. Dari 'tabrakan' kode CSS tersebut mana yang akan tampil?Agar langsung mengetahui, maka kita lakukan praktek. Bukalah notepad baru dan simpan code CSS berikut dengan nama ini.css.
h2 {
color:blue;
}
Berikunya pada notepad yang berbeda. Gunakan kode dibawah ini. Simpan dengan nama : ibahasapemograman.html.
<!DOCTYPE html>
<html>
<head>
<title>Tabrakan Cascading CSS</title>
<link rel="stylesheet" type="text/css" href="ini.css">
<style type="text/css">
h2 {
color:red;
}
</style>
</head>
<body>
<h2> Hasil <em> external sheet vs internal sheet </em> </h2>
<h2 style="color:green"> <em> external sheet vs internal sheet vs inline style </h2>
</body>
</html>
Pada kode yang diwarnai biru menyatakan bahwa CSS berasal dari sumber luar (external sheet) yaitu pada file css yang disimpan dengan nama ini.css tadi. Sementara pada halaman juga didefenisikan secara internal sheet dengan kode yang berwarna merah. Kemudian kode yan diwarnai hijau di adu lagi dengan inline style. Ketika dijalankan maka akan didapatkan hasil.
Kesimpulan
Dari pratikum di atas anda tentu bisa menarik kesimpulan sendiri. Jadi halaman HTML akan memprioritaskan CSS yang lebih 'mendalam'. Pertama lihat benturan pertama. Kita mengadu internal sheet dan external sheet. Karena internal lebih di dalam maka akan ditampilkan perintah dari CSS internal terlebih dahulu.
Pada kasus berikutnya di adu ke-tiga penulisan tersebut. Ternyata pemenangnya adalah inline style. Karena inline lebih dekat dan lebih dalam pada tag dibanding 2 lainnya. Maka urutan yang akan diprioritaskan adalah : inline style - internal sheet - external sheet.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment