Beberapa style sheet CSS pada dasarnya dapat digunakan pada satu halaman HTML secara bersamaan. Pada beberapa kasus penggunaan style sheet CSS secara multiple diperlukan untuk melengkapi kekurangan pada style yang satu dengan lainnya. Namun pada kenyataannya, banyak ditemui kendala di dalam implementasinya. Hal ini disebabkan oleh skala prioritas dari pada penggunaan file CSS itu sendiri.
Halaman web saat diload akan bekerja seperti aliran air terjun (waterfall) yaitu mulai dari atas kemudian turun ke bawah. Pada halaman HTML yang memiliki beberapa style sheet, baik itu Internal, Eksternal maupun Inline style sheet oleh browser akan diproses mulai dari yang paling atas sampai ke yang paling bawah.
Nilai dari kode CSS yang sebelumnya sudah dituliskan akan ditimpa ulang dengan nilai yang baru untuk selektor yang sama pada kode CSS berikutnya. Kode tersebut dapat untuk merevisi kode yang sebelumnya dituliskan.
Contoh 1 :
CSS
1
Previous Page.header{color:purple; color:green; color:teal; color:red;}
Contoh 2 :
CSS
1
2
3
4
.header{color:purple;}
.header{color:green;}
.header{color:teal;}
.header{color:red;}
Pada contoh ke-1 pada style di atas, jika elemen HTML menggunakan class header maka warna (color) yang akan diterapkan adalah warna merah (red). Walaupun sebelumnya menggunakan color purple, green dan teal. Kemudian pada contoh ke-2, warna yang akan diterapkan juga merah (red). Walaupun class sebelumnya memiliki nilai yang berbeda. Skala prioritas untuk kasus tersebut, jika selektornya sama dan propertinya sama maka nilai yang paling akhir itulah yang akan diambil atau diterapkan.
Style sheet CSS secara Inline artinya kode CSS dituliskan secara langsung pada tag HTML-nya. Sedangkan style sheet CSS secara Internal artinya kode CSS ditempatkan pada bagian <head></head>. Untuk melihat skala prioritasnya, Saya akan membuat halaman HTML-nya terlebih dulu :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<style>
.artikel{color:red;}
</style>
<title>Skala Prioritas Style Sheet CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p class="artikel" style="color:navy;">One bad chapter doesn't mean your life is over. Turn the page and move on..</p>
</body>
</html>
Saat halaman diload menghasilkan tampilan :
Dari gambar di atas, untuk elemen dengan class "artikel", Skala prioritas yang paling kuat berada pada style sheet Inline. Hal ini dibuktikan dengan warna navy yang diterapkan pada elemen tersebut walaupun sebelumnya menggunakan warna merah (red).
Style sheet CSS secara Eksternal artinya style yang akan diterapkan menggunakan file CSS eksternal. Di sini Saya akan menggunakan file dengan nama style.css :
CSS
1
.artikel{color:yellow;}
File HTML-nya sebagai berikut :
HTML
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Skala Prioritas Style Sheet CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p class="artikel" style="color:teal;">One bad chapter doesn't mean your life is over. Turn the page and move on..</p>
</body>
</html>
Saat halaman diload menghasilkan tampilan :
Dari gambar di atas, untuk elemen dengan class "artikel", Skala prioritas yang paling kuat berada pada style sheet Inline. Hal ini dibuktikan dengan warna teal yang diterapkan walaupun sebelumnya menggunakan warna kuning (yellow).
Sebelum melakukan pengujian skala prioritas dari kedua metode style sheet CSS di atas. Hal yang perlu diperhatikan adalah masalah penempatan kode CSS-nya. Style sheet Internal dapat ditempatkan sebelum style sheet Eksternal atau dapat juga ditempatkan sesudahnya.
Berikut ini file style.css-nya :
CSS
1
.artikel{color:FireBrick;}
Berikut ini halaman HTML dengan style sheet Internal ditempatkan sebelum style sheet Eksternal :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<style>
.artikel{color:blue;}
</style>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Skala Prioritas Style Sheet CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p class="artikel">One bad chapter doesn't mean your life is over. Turn the page and move on..</p>
</body>
</html>
Saat dijalankan akan menghasilkan :
Dari pengujian di atas, untuk elemen dengan class "artikel", Skala prioritas yang paling kuat berada pada style sheet Eksternal. Hal ini dibuktikan dengan warna FireBrick yang diterapkan walaupun pada internal menggunakan warna biru (blue).
Berikut ini halaman HTML dengan style sheet Internal ditempatkan sesudah style sheet Eksternal :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
.artikel{color:blue;}
</style>
<title>Skala Prioritas Style Sheet CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p class="artikel">One bad chapter doesn't mean your life is over. Turn the page and move on..</p>
</body>
</html>
Saat dijalankan akan menghasilkan :
Dari pengujian di atas, untuk elemen dengan class "artikel", Skala prioritas yang paling kuat berada pada style sheet Internal. Hal ini dibuktikan dengan warna Blue yang diterapkan walaupun pada Eksternal menggunakan warna FireBrick.
Kesimpulan dari kedua pengujian di atas adalah bahwa keduanya mengikuti aturan air terjun (waterfall). Di mana untuk elemen yang sama dengan properti yang sama, maka nilai yang akan diterapkan adalah nilai yang paling akhir (paling bawah).
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
