Urutan Prioritas Selector CSS (Cascading)

belajar HTML dan CSS untuk pemula

Di dalam CSS, sebuah tag bisa mempunyai lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan mengulas urutan atau prioritas dari kode CSS yang akan digunakan oleh tag HTML, atau terkenal dengan istilah Cascading.

Pengertian Cascading dari CSS

CSS ialah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris bisa berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini merupakan style yang bisa ditimpa atau menerpa style lain sesuai urutannya, atau kita sebut saja sebagai pengutamaan CSS.

Terkait kata “prioritas” untuk kode CSS, saya akan bagi jadi 2 bagian, di artikel ini cuma akan membicarakan mengenai prioritas atau urutan dari kode CSS bila dilihat dari “sumber” kode itu. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial selanjutnya kita akan membicarakan mengenai prioritas CSS dilihat dari kespesifikannya.

Efek Cascading berdasarkan sumber kode CSS

Misalnya kita mempunyai sebuah tag header <h2>, lalu mau membuat kode CSS memakai external style sheet untuk mengubah tag header itu jadi biru. Tetapi di saat yang sama kita  juga membuat internel style sheet untuk mengubahnya jadi warna merah, maka warna apakah yang akan tampil di browser?

Untuk mengujinya, marilah kita mencobanya secara langsung, langkah awal, buatlah sebuah file CSS yang akan diimport, misalnya prioritas.css, ketikkan kode CSS berikut:

h2

Lalu sebagai sample HTML, saya memakai prioritas.html, savelah kedua file pada folder yang sama:

<!DOCTYPE html>

<html>
<head>
   <title>Contoh Kasus Cascading CSS</title>
   <link rel="stylesheet" type="text/css" href="prioritas.css">         
   <style type="text/css">
            h2 
    </style>
</head>

<body>
   <h2>
       Akan berwarna apa saya?..1
   </h2>

   <h2 style="color:green">
       Akan berwarna apa saya?..2
   </h2>
</body>
</html>

Perhatikan bahwa sebelum tag <style>, saya “memanggil” file prioritas.css terlebih dulu. Kemudian pada tag <h2> yang kedua saya menambahkan atribut “color:green” pada tag <h2>.

Bila kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan bewarna merah dan biru, dan tak ada yang bewarna biru.

Dari contoh sederhana diatas, tag <h2> sebetulnya “dikenakan” atau “diubah” oleh 3 property CSS yang sama secara bersamaan, yaitu ketiga selector itu mau merubah warna text dari tag <h2>, tetapi cuma ada satu kode yang akan “menang”.

Dalam masalah ‘timpa-menimpa’ ini,  CSS mempunyai aturan prioritas tersendiri. Bila terdapat property CSS yang saling ‘bentrok’,  maka urutan prioritasnya yaitu sebagai berikut (dari yang amat kuat):

  1. Inline style, yaitu style yang langsung melekat di tag.
  2. Internal style, yaitu style yang dideklarasikan di awal halaman (tag <style>)
  3. Eksternal style, yaitu style yang dideklarasikan dalam sebuah file .css , dan dipanggil melalui tag <link> atau @import

Maka bila melihat sekali lagi kode HTML diatas, text “Akan berwana apa saya?..1” akan berwarna merah sebab internal style color:red lebih mendapat prioritas lebih tinggi ketimbang external style color:blue.

Sedangkan text “Akan berwana apa saya?..2” berwarna hijau sebab inline style color:green lebih mendapat prioritas ketimbang external style color:blue ataupun internal style color:red.

Selain prioritas antar “sumber” kode CSS itu, proses cascading atau prioritas CSS juga masih berlanjut untuk kode CSS dalam file yang sama. Hal ini akan kita bahas pada tutorial berikutnya Urutan Prioritas Selector CSS (Specificity).


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat