Tutorial Belajar CSS Part 6 – Urutan Prioritas Selector CSS Berdasarkan Cara Penulisan Kode (Cascading)

bySetyo Wibowo ID - 0

Jika dalam tutorial sebelumnya kita telah membahas mengenai Cara Penulisan Selector CSS, nah dalam tutorial kali ini kita akan membahas mengenai prioritas dari kode CSS ketika digunakan secara bersamaan dari beberapa jenis penulisan style css, maksud dari prioritas disini adalah ketika dalam sebuah halaman website, terdapat objek misalnya tag yang mendapatkan effect dari beberapa kode css secara bersamaan, kode css mana yang akan digunakan ? kita akan bahas lebih lanjut di tutorial ini.





Untuk mempermudah pemahaman, coba perhatikan contoh dibawah ini :





file prioritas_css.html





<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_cssku.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 style_cssku.css, file ini akan kita gunakan sebagai external style css yang dipanggil di file prioritas_css.html





p
{
color:green;
}








pada kode diatas kita coba untuk membuat 3 kode css untuk merubah tag p, dengan mode internal,external dan inline, jika anda belum mengenal style penulisan kode css, bisa dibaca terlebih dahulu Cara Penulisan Kode CSS pada HTML.





Penjelasan dari kode diatas adalah :





  1. Css dengan mode internal merubah warna paragraf menjadi warna biru
  2. Css dengan mode inline merubah warna paragraf menjadi warna merah
  3. Css dengan mode external merubah warna paragraf menjadi warna hijau.




yang jadi pertanyaan paragraf akan berganti menjadi warna apa ?  ketika ada beberapa kode css yang menggunakan selector p digunakan secara bersamaan, yang membedakan hanya sumber dari kode cssnya, yaitu dari mode internal, external, dan inline, nah ini adalah maksud dari prioritas dari css berdasarkan sumber kodenya.





Hasilnya dari pemanggilan file prioritas_css.html adalah :









penjelasan :





  • Paragraf pertama karena menggunakan mode inline, maka text paragraf berwarna merah
  • Paragraf kedua karena tidak menggunakan mode inline, sehingga mendapatkan warna biru effect dari kode css dari mode internal




maka bisa disimpulkan ketika ada satu objek di HTML yang mendapatkan beberapa kode css secara bersamaan, dari beberapa mode style css, maka urutannya adalah :





  1. Mode inline style lebih diutamakan untuk digunakan, yaitu kode css yang ditulis di tag itu sendiri.
  2. Setelah mode inline yang diutamakan adalah mode internal style, yaitu kode css yang ditulis di antara tag <style></style>
  3. Setelah mode internal style, baru yang digunakan adalah mode external style, yaitu kode css yang ditulis di file lain, dan harus di linkkan dengan file html ketika akan menggunakan kode cssnya.




karena prioritas tersebut paragraf pertama mendapatkan warna merah karena menggunakan mode inline style, dan paragraf kedua mendapatkan warna biru karena tidak menggunakan inline style, sehingga mendapatkan effect dari kode css dengan mode internal style.





Bagaimana teman – teman cukup paham ya mengenai bagaimana prioritas dari pengunaan kode css secara bersamaan tetapi menggunakan style pemanggilan yang berbeda.





Baik itu dulu yang bisa warung belajar bahas dalam tutorial kali ini, kita telah belajar bagamana prioritas  dari penggunaan kode css jika dilihat dari sumber penulisan kodenya, jika ada yang ingin didiskusikan bisa di kolom komentar, sekian dulu tutorial kali ini sampai jumpa di tutorial selanjutnya.


Tags:

Post a Comment (0)

أحدث أقدم