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

   
	
	
   
   
	
Ini judul
	
Ini adalah contoh paragraf
   

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

Contoh isi style.css-nya

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

p {
	color: red;
}

– Internal CSS :

 

   
	 
	 
	
   
   
	
Ini Judul
 
	
Ini contoh teks paragraf
 
    

Nah kalau Internal CSS, kita tidak mengimport file CSS eksternal, melainkan langsung mendeklarasikannya dalam tag .
Kelebihan dari internal CSS juga dapat memudahkan mengelola satu buah halaman web tanpa menganggu pengaturan CSS dihalaman lain nya.
Kekurangan dari internal CSS ini membangun web menjadi tidak efisien dikarenakan harus mengatur setiap style berdasarkan halaman walaupun teman-teman masih menggunakan class dan id yang sama atau berbeda.

External CSS adalah cara menggunakan CSS dengan membuat file baru berekstensi (.css) dan untuk menggabungkan file HTML kita dengan file (.css) yang baru dibuat itu dengan menggunakan tag . Dan pada file CSS yang sudah di link dengan file HTML sudah tidak perlu memakai tag lagi ya teman-teman.
Kelebihan memakai external CSS juga dapat membuat website lebih efisien karena semua style dibuat didalam 1 file (.css) jadi tidak menambah ukuran file HTML nya karena kode CSS diletakkan pada file yang berbeda, dan dapat menghemat bandwidth.
Kekurangan dari external CSS jika sudah terlalu banyak style yang dibuat akan membuat saat merender nya akan membutuhkan loading yang sedikit lama.

Inline CSS adalah pemakaian CSS yang diberikan di tag HTML tertentu dengan menambahkan atribut style di tag HTML yang mau diberikan CSS. teknik ini biasanya digunakan untuk pemformatan khusus pada tag HTML tidak untuk keseluruh elemen dalam dokumen web. Penggunaan inline CSS juga tidak efisien karena membuat file HTML anda seperti penuh dengan atribut-atribut style di setiap tag HTML dan juga membuat ukuran file HTML nya akan bertambah besar.

Apa bedanya CSS internal dan eksternal?

Apa saja kelebihan CSS?

Apa yang dimaksud dengan external CSS?

Apa kelebihan dan kekurangan CSS?