Frontend : CSS Bagian 6 – Urutan Prioritas Selector

Ketika kita menggunakan banyak selector, kemungkinan besar akan tertiban oleh selector lain nya. Inilah problem umum ketika kita menggunakan CSS. Dengan kita mengetahui urutan prioritas selector, problem seperti “tertiban” akan mudah terselesaikan. Contoh kasus Css tertiban oleh selector lainnya :

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 6 - Urutan Prioritas Selector</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		p {
			color: red;
			font-size: 25px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<p style="color: blue;">Teks ini adalah Prioritas Selector</p>
</body>
</html>

Codingan diatas terdapat metode Inline, Internal, dan External. Mana yang akan di manipulasi?Apakah Inline?Internal?Atau External? Jawabannya yaitu Inline. Kok Bisa? Inilah yang dinamakan Prioritas. Prioritas pertama pada Selector CSS yaitu metode Inline ya bukan DOI hehe…


Urutan Prioritas Selector

1. Inline : Menempati posisi pertama, karena Inline melekat di sebuah tag sehingga terkesan menyatu

2. Internal : Menempati posisi kedua, karena berada di dalam tag head

3. External : Menempati di posisi terakhir, karena file berada diluar html

Leave a Reply

Your email address will not be published. Required fields are marked *