-->

Iklan bawah header

Belajar CSS : Urutan Prioritas Selector CSS Berdasarkan Cara Penulisan Code (Cascading)

Cascading

Sebelumnya kita sudah membahas tentang bagaimana Cara Penulisan Selector CSS, Nah pada pembahasan kali ini kita akan belajar mengenai prioritas dari code CSS saat digunakan secara bersamaan dari beberapa jenis penulisan style css, maksudnya adalah ketika dalam sebuah website, terdapat beberapa objek yang mendapatkan effect dari beberapa kode css secara bersamaan, maka kode css mana yang akan digunakan? mari langsung saja kita masuk ke pembahasannya.

Urutan Prioritas Selector CSS Berdasarkan Cara Penulisan Code (Cascading)

Coba kalian perhatikan contoh script html dibawah ini :

contoh.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="contoh1.css">
<title>Prioritas CSS</title>
<style type="text/css">
p
{
color:blue;
}
</style>
</head>
<body>
<p style="color:red;">Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p> 
</body>
</html>

file contoh1.css, file ini akan digunakan sebagai eksternal style css yang akan dipanggil di file contoh.html

p {
color:green;
}

Dari contoh diatas kita coba untuk membuat 3 code css untuk merubah tag p, dengan mode internal, eksternal dan inline.

Berikut penjelasannya :

  1. css dengan mode internal akan merubah warna paragraf menjadi warna biru
  2. css dengan mode inline akan merubah warna paragraf menjadi warna merah
  3. css dengan mode eksternal akan merubah warna paragraf menjadi warna hijau

Nah, pertanyaanya paragraf yang sudah diberi effect dari beberapa kode css akan berganti menjadi warna apa? saat beberapa code css yang menggunakan selector p digunakan secara bersamaan, yang menjadi pembedanya adalah sumber dari pemanggilan code cssnya, yaitu dari mode internal, external dan inline, nah inilah yang dimaksud dengan prioritas dari css berdasarkan sumber kodenya.

Hasil yang akan ditampilkan pada browser saat script contoh.html dijalankan :

Cascading

Pejelasan:

  • Pada paragraf pertama karena menggunakan mode inline, maka teks yang ditampilkan berwarna merah
  • Pada paragraf kedua karena tidak menggunakan mode inline style, maka akan menampilkan warna biru effect yang berasal dari code css mode internal

Maka kesimpulannya adalah sebagai berikut :

  1. Mode inline style lebih diutamakan atau diprioritaskan untuk digunakan
  2. Setelah mode inline, kode selanjutnya yang diprioritaskan adalah mode internal style, yaitu kode css yang ditulis antara tag <style> </style>
  3. Setelah mode internal style, selanjutnya baru mode eksternal style yang akan diprioritaskan

Demikianlah pembahasan singkat mengenai Urutan Prioritas Selector CSS Berdasarkan Cara Penulisan Code (Cascading). semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel