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 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

   
	
	Contoh Eksternal CSS
   
   
	
Ini judul
	
Ini adalah contoh paragraf
   

Kemudian di dalam elemen ,  kita import file CSS kita, misal nama filenya style.css.

	
	Contoh Eksternal CSS
	

Contoh isi style.css-nya

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

p {
	color: red;
}

– Internal CSS :

 

   
	 
	My CSS experiment 
	 
		h1 {
  		      color: white; 
		      background-color: red; 
		      border: 1px solid black;
		} 

		p { 
		      color: red; 
		}
	
   
   
	
Ini Judul
 
	
Ini contoh teks paragraf
 
    

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

– Inline CSS :

 

   
   	 
   	My CSS experiment 
    
   
   	

		Ini Judul
  	
 	

		Ini contoh teks paragraf
 	
 
    

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?

CSS atau Cascading Style Sheet adalah stylesheet yang digunakan untuk men-design/mengatur tampilan website atau tampilan dokumen HTML. Membuat website tidak menggunakan CSS juga tidak apa2-apa tapi akan sulit atau ribet jika teman-teman ingin mengedit/merevisi kembali website teman-teman. Dengan adanya CSS dapat membantu kita untuk mengatur tampilan website/blog kalian. CSS juga memperkenalkan template berupa style untuk dibuat dan mengijinkan penulisan kode yang lebih mudah dari halaman-halaman web yang sudah dibuat. Untuk saat ini CSS sangat banyak digunakan karena berbagai kemudahan dan lengkapnya atribut-atribut yang dimilikinya.

Internal CSS adalah style yang digabungkan di dalam file HTML, internal CSS diletakan di antara tag dan