Perbedaan Eksternal, Internal dan Inline CSS (2022)

Kali ini kita akan membahas lebih mendetail mengenai perbedaan Eksternal, Internal dan Inline CSS lebih mendetail. Pada tutorial sebelumnya kita telah membahas cara menghubungkan CSS dengan HTML. Kita akan membahas dalam urutan prioritas, kecepatan loading website, dan lain – lain.

Bagaimana Urutan Prioritas pada CSS…?

Untuk urutan prioritas dapat dispesifikasikan sebagai berikut (nomor satu mempunyai prioritas yang paling utama).
1. Inline Style (didalam elemen HTML)
2. Eksternal dan Internal Style Sheet (tergantung mana yang terdapat pada bagian terakhir)
3. Browser Default

Urutan tersebut terlihat bahwa penggunaan inline style (langsung pada elemen HTML) mempunyai prioritas tertinggi. Artinya akan membuat override (“menggantikan”) style yang didefinisikan dalam tag <head> atau yang terdapat pada eksternal style sheet maupun browser secara default.

Untuk prioritas pada eksternal style sheet dan internal style sheet mempunyai prioritas yang sama. Namun, tergantung dari bagian style mana yang dituliskan terakhir. Bagian style sheet pertama yang ditulis maka akan di “cascade/ditimpa” oleh bagian penulisan style yang terakhir.

Apa Bukti Eksternal CSS dan Internal CSS mempunyai Prioritas Sama…?

Untuk menguji bahwa antara Eksternal dan Internal Style Sheet sama bisa dilihat dari kode dibawah.
Menggunakan file eksternal CSS dengan nama “style.css”:
/* File style.css */

h1 {
   color: red;
}
p {
   color: blue;
}

– Eksternal CSS Pertama dan Internal CSS Terakhir

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" type="text/css" href="style.css"> <!-- Eksternal CSS -->
     <style>
     p {
     color: purple;
     }
     h1 {
     color: green;
     }
</style> <!-- Internal CSS -->
</head>
	<body>
	<h1>Tutorial Belajar CSS</h1>
	<p>Belajar Web Desain menggunakan CSS sangat mudah sekali...!</p>
	</body>
</html>

Output :

Perbedaan Eksternal, Internal dan Inline CSS

Hasil tersebut membuktikan bahwa teks menjadi berwarna ungu dan hijau, dimana aturan itu terdapat di Internal CSS. Terbukti dimenangkan oleh Internal CSS (yang terakhir).

– Internal Pertama dan Eksternal CSS Terakhir

<!DOCTYPE html>
<html>
	<head>
	<style>
		p {
		color: purple;
		}
		h1 {
		color: green;
		}
	</style> <!-- Internal CSS -->
	<link rel="stylesheet" type="text/css" href="style.css"> <!-- Eksternal CSS -->
	</head>
	<body>
		<h1>Tutorial Belajar CSS</h1>
		<p>Belajar Web Desain menggunakan CSS sangat mudah sekali...!</p>
	</body>
</html>

Output :

Perbedaan Eksternal, Internal dan Inline CSS

Hasil tersebut membuktikan bahwa teks menjadi berwarna merah dan biru, dimana aturan itu terdapat di Eksternal CSS. Terbukti dimenangkan oleh Eksternal CSS (yang terakhir).

Kesimpulanya, antara Eksternal CSS dan Internal CSS mempunyai prioritas yang sama. Tergantung dimana yang terakhir akan menggantikan aturan sebelumnya.

Eksternal, Internal dan Inline CSS mana yang Tercepat…?

Berdasarkan Google PageSpeed Tools penggunaan CSS yang paling efisin adalah menggunakan Inline Style CSS. Hal ini disebabkan, karena browser terbaru sekarang akan memblok eksternal CSS sebelum ditampilkan pada screen. Maka dengan inline CSS akan mempercepat loading website. Berikut ini merupakan penerapan dari inline CSS.

Jika dokumen seperti ini:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="biru kuning besar tebal">
        Selamat Pagi!
        </div>
    </body>
</html>

Sumber style sheet “style.css” seperti ini.

.kuning {background-color: yellow;}
.biru {color: blue;}
.besar { font-size: 8em; }
.tebal { font-weight: bold; }

Lalu, kita bisa melakukan inline CSS seperti kode ini.

<html>
    <head>
    <style>
        .kuning {background-color: yellow;}
        .biru {color: blue;}
        .besar { font-size: 8em; }
        .tebal { font-weight: bold; }
    </style>
    </head>
    <body>
        <div class="biru kuning besar tebal">
        Selamat Pagi!
        </div>
    </body>
</html>

Apakah bisa Menggunakan Eksternal, Internal dan Inline secara Bersamaan…?

Tentu bisa, dalam suatu halaman kita bisa menggunakan aturan ketiganya seperti pada contoh diatas. Namun terdapat prioritas masing – masing.

Demikian tutorial belajar CSS mengenai perbedaan eksternal, internal dan inline CSS. Selanjutnya kita akan membahas mengenai satuan ukuran pada CSS. Semoga tutorial ini bermanfaat dan terima kasih.