CSSMateri CourseNusantech Academy

Modul 3-2 Internal & Eksternal CSS

By 8 Mei 2020 Juni 3rd, 2020 No Comments

Halo teman-teman, jumpa lagi dalam course HTML & CSS Nusantech Academy.

Pada pembahasan sebelum nya saya sudah membahas tentang pengenalan CSS. Di kesempatan kali ini kita akan bahas mengenai internal dan eksternal CSS.

Apa itu Internal & Eksternal CSS?

Dalam pembuatan website, ada beberapa cara dalam menggunakan sintaks CSS, diantaranya :  Internal, Inline dan Eksternal CSS. Internal, Inline maupun Ekternal CSS merupakan sebutan untuk dimana kode style CSS kita dideklarasikan dan digunakan.

Lebih jelasnya, Eksternal CSS adalah kode CSS yang dideklarasikan dalam file .css  terpisah dari file HTML yang menggunakannya. Eksternal CSS juga dapat digunakan bersama-sama dengan file HTML lain alias global & reusable.

Sedangkan Internal CSS dideklarasikan didalam tag <style></style> suatu file HTML. Style Internal CSS juga reusable kok, namun style Internal CSS hanya dapat digunakan dalam satu file dimana style itu dideklarasikan.

Sama seperti Internal CSS,  Inline CSS juga dideklarasikan dalam satu file HTML, yang membedakannya, Inline CSS langsung diaplikasikan ke dalam attribute “style” element HTML. Inline CSS  tidak dapat digunakan bersama oleh tag atau file HTML lainnya.

Contoh Penggunaan

Biar lebih paham dan jelas, yuk langsung ke contoh berikut:

Eksternal CSS  :

Anggap saja kita mempunyai file bernama index.html dengan kode seperti berikut

<!DOCTYPE html>
<html lang="en">
   <head>
	<meta charset="utf-8">
	<title>Contoh Eksternal CSS</title>
   </head>
   <body>
	<h1>Ini judul</h1>
	<p>Ini adalah contoh paragraf</p>
   </body>
</html>

Kemudian di dalam elemen <head></head>,  kita import file CSS kita, misal nama filenya style.css.

<head>
	<meta charset="utf-8">
	<title>Contoh Eksternal CSS</title>
	<link rel="stylesheet" href="./style.css">
</head>

Contoh isi style.css-nya

h1 {
	color: white;
	background-color: red;
}

p {
	color: red;
}

Internal CSS :

<!DOCTYPE html> 
<html lang="en">
   <head>
	<meta charset="utf-8"> 
	<title>My CSS experiment</title> 
	<style> 
		h1 {
  		      color: white; 
		      background-color: red; 
		      border: 1px solid black;
		} 

		p { 
		      color: red; 
		}
	</style>
   </head>
   <body>
	<h1>Ini Judul</h1> 
	<p>Ini contoh teks paragraf</p> 
   </body> 
</html>

Nah kalau Internal CSS, kita tidak mengimport file CSS eksternal, melainkan langsung mendeklarasikannya dalam tag <style> satu file HTML seperti contoh di atas.

Inline CSS :

<!DOCTYPE html> 
<html lang="en">
   <head>
   	<meta charset="utf-8"> 
   	<title>My CSS experiment</title> 
   </head> 
   <body>
   	<h1 style=" color: white; background-color: red; border: 1px solid black;">
		Ini Judul
  	</h1>
 	<p style=" color color: red;">
		Ini contoh teks paragraf
 	</p> 
   </body> 
</html>

Output :

Output yang dihasilkan sama kan? Terus apa bedanya?

Coba teman-teman perhatikan, mana diantara ketiga cara tersebut yang paling efektif dan efisien?

Ya!

Eksternal CSS merupakan penggunaan yang paling efektif dalam pengembangan website, karena selain kodingan kita terlihat bersih, kita juga tidak perlu repot-repot mengganti style disetiap halaman HTML agar konsisten ketika terjadi perubahan rencana desain. Cukup ganti satu file CSS yang dipakai oleh beberapa file HTML, maka semua tampilan halaman web kita akan ikut berubah. efisien bukan?

Leave a Reply