urutan prioritas selector CSS (cascading)

Luthfi blc 9/05/2018
A. Pendahuluan

                                                   Assalamualaikum wr.wb

oke bertemu lagi dengan saya kali ini saya akan membahas urutan prioritas Selector CSS
simak dengan baik ya.



B. Latar belakang

     cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.

C. Maksud dan tujuan

     ingin tahu urutan prioritas selector CSS

D. Waktu pelaksanaan

              2 jam

E. Pembahasan

 

Pengertian Cascading dari CSS

CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.
Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas tentang prioritas CSS dilihat dari kespesifikannya.

Efek Cascading berdasarkan sumber kode CSS

Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada saat yang sama kita  juga membuat internel style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?
Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode CSS berikut:
1
2
3
h2 {
    color:blue;
}
Lalu sebagai sample HTML, saya menggunakan prioritas.html, savelah kedua file pada folder yang sama:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
   <title>Contoh Kasus Cascading CSS</title>
<link rel="stylesheet" type="text/css" href="prioritas.css">         
<style type="text/css">
            h2 {
               color:red;
               }
</style>
</head>
<body>
<h2>
Akan berwarna apa saya?..1
</h2>
<h2 style="color:green">
Akan berwarna apa saya?..2
</h2>
</body>
</html>
F. Alat dan  bahan
    -laptop
    -charger laptop
    -koneksi internet
G. referensi
H. Penutup
     oke sekian dari saya bila ada kesalahan saya minta maaf , semoga bermanfaat
                                                    wassalamualaikum wr.wb
Tags:

Post a Comment

0 Comments

silahkan berkomentar tentang template ini