Belajar CSS : Mengenal Urutan Prioritas Selector CSS (6) - Suka Code
Mengenal kata "prioritas" untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini saya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari sumber kode tersebut. Kita akan menguji prioritas dari eksternal style sheet, internal style sheet, dan iniline style CSS.
Efek Cascading berdasarkan sumber kode CSS
Misalkan kita memiliki sebuah tag heading <h2>, lalu ingin membuat kode CSS menggunakan eksternal style sheet untuk merubah tag header tersebut menjadi biru. Namun pada saat yang sama kita juga membuat internal style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?
Untuk mengujinya, marilah kita coba secara langsung, langkah pertama, buatlah sebuah file CSS yang akan di import misalkan belar.css, ketikkan kode CSS berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS with Suka Code</title>
<link href="belajar.css" rel="stylesheet" type="text/css">
<style type="text/css">
h1 {
color: red;
}
</style>
</head>
<body>
<h1> Belajar Prioritas CSS </h1>
<p style="color: green;"> Lorem Ipsum </p>
</body>
</html>
Hasil :
Dalam masalah "timpa-menimpa" ini, CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling "bentrok", maka urutan prioritasnya adalah sebagai berikut (yang paling kuat):
Inline style, yakni style yang langsung melekat pada tag.
Inline style, yakni style yang langsung melekat pada tag.
Internal style, yakni yang dideklarasikan pada awal halaman (tag<style>).
Eksternal style, yakni style dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import
Eksternal style, yakni style dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "Belajar CSS : Mengenal Urutan Prioritas Selector CSS (6) - Suka Code"
Posting Komentar