Perbedaan External CSS, Internal CSS, dan Inline CSS serta Kegunaannya

By Bang Feri 21 Mar, 2020 Post a Comment

Coding/CSS

Bang Feri Blog - Penulisan dan jenis CSS terdapat 3 (tiga) macam penulisan (Inline CSS, External CSS, dan Internal CSS) ketiga jenis CSS tersebut juga memiliki cara penulisan, kegunaan dan manfaat yang juga berbeda.

Oleh karena itu buat sobat yang masih kebingungan atau belum tahu bagaimana cara penulisan Inline CSS, External CSS, dan Internal CSS serta kegunaannya, maka pada postingan kali ini saya akan menjelaskannya sesuai dengan pengalaman dan pengetahuan saya.

Berikut ini Penjelasan dan Perbedaan External CSS, Internal CSS, dan Inline CSS dan kegunaannya.

Apa itu External CSS?

External CSS adalah CSS yang penulisan codenya ditempatkan pada file atau dokumen lain dengan ekstensi .css Misalnya style.css atau bangferi.css

Perlu sobat ketahui bahwa penulisan nama file CSS tidaklah harus bernama style.css tetapi juga bisa dengan nama yang lain seperti contoh di atas.

Agar lebih jelas berikut ini contoh penulisan External CSS yang ditempatkan pada file style.css dan tanpa diawali dengan tag <style>

body {
 margin: 0px;
 padding: 0px;
 font-size: 16px;
}

#header {
 padding: 20px;
 font-size:25px;
 background:#424a56;
}

#wrapper {
 padding: 20px;
 max-width: 1200px;
}

Nah, karena kode CSS terpisah dengan file Index.html maka untuk memanggil fungsi dari CSS yang adai di file style.css, maka kita harus mengimpornya.

Bagaimana cara memanggil CSS Eksternal, Bang?

Nah, jadi untuk memanggil dan mengimport CSS Eksternal, hal yang perlu dilakukan adalah dengan menambahkan tag link berikut ini dan diletakkan diantara tag <head> Contohnya:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Untuk penulisan lengkapnya kurang lebih seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<header id="header">BANG FERI BLOG</header>

<div id="wrapper">
 The content of the document......
</div>
</body>

</html>

Kegunaan/Manfaat External CSS

Menggunakan metode External CSS juga memiliki beberapa kegunaan dan manfaat, yaitu sebagai berikut ini:

External CSS bisa digunakan di banyak halaman atau dokumen HTML
Membuat loading web lebih cepat
Membuat tampilan struktur kode lebih rapih
Mengurangi ukuran halaman atau dokumen

Kekurangan External CSS

Menggunakan metode penulisan External CSS juga memiliki beberapa kekurangan diantaranya sebagai berikut:

Perubahan halaman akan terjadi setelah CSS selesai di mudah (diimport)

Apa itu Internal CSS?

Internal CSS adalah jenis CSS yang cara penulisannya ditempatkan pada satu file yang sama yaitu index.html

Masih bingung? Nah internal CSS umumnya ditempatkan diantara tag <head> dan dideklarasikan dengan tag <style> untuk mendefinisikannya. Agar lebih jelas silahkan sobat perhatikan cara penulisan internal CSS berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
 margin: 0px;
 padding: 0px;
 font-size: 16px;
}
#header {
 padding: 20px;
 font-size:25px;
 background:#424a56;
}
#wrapper {
 padding: 20px;
 max-width: 1200px;
}
</style>
</head>

<body>
<header id="header">BANG FERI BLOG</header>

<div id="wrapper">
The content of the document......
</div>
</body>

</html>

Kelebihan/Manfaat Internal CSS

Menggunakan metode penulisan Internal CSS pada sebuah dokumen memiliki beberapa kelebihan diantaranya sebagai berikut ini:

Internal CSS hanya akan merubah satu halaman saja. Tidak akan memengaruhi tampilan dokumen/halaman lain.
Tidak perlu meng-upload/membuat file CSS lain. Karena CSS dapat ditulis dalam satu file HTML, contohnya seperti diatas.

Kekurangan Internal CSS

Menggunakan metode penulisan Internal CSS pada sebuah dokumen memilik beberapa kekurangan diantaranya sebagai berikut ini:

Internal CSS hanya dapat dijalankan pada satu dokumen atau satu halaman saja.
Internal CSS kurang efisien jika ingin digunakan pada beberapa dokumen/halaman berbeda dengan CSS yang sama.

Apa itu Inline CSS?

Inline CSS adalah salah satu jenis metode penulisan CSS yang langsung ditulis didalam baris tag tertentu.

Maksudnya, metode penulisan Inline CSS ditentukan dengan menambahkan atribut style di dalam baris tag. Oleh karena itu metode ini disebut dengan Inline CSS.

Supaya lebih jelas berikut ini contoh penulisan Inline CSS sederhana.

<p style="background:yellow; color:red; padding:5px;">
Belajar Metode Penulisan CSS di BANG FERI BLOG
</p>

Untuk penulisan CSS lengkapnya kurang lebih seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<p style="background:yellow; color:red; padding:5px;">
Belajar Metode Penulisan CSS di BANG FERI BLOG
</p>
</body>

</html>

Kegunaan/Manfaat Inline CSS

Berikut ini beberapa kegunaan menggunakan metode penulisan Inline CSS.

Inline CSS hanya dijalankan pada satu tag
Mengurangi permintaan HTTP (jika terapkan pada blog/website

Kekurangan Menggunakan Inline CSS

Berikut ini beberapa kekurangan Inline CSS, diantara sebagai berikut:

Harus diterapkan pada semua tag untuk mengatur tampilan dari tag tersebut
Kurang efisien karena harus selalu membuat atribut style di setiap tag
Susunan kode HTML dan CSS tidak terlihat rapi

Nah mungkin hanya itu saja kegunaan dan kekurangan menggunakan metode penulisan Inline CSS

Penutupan

Nah jadi seperti itulah Penjelasan dan Perbedaan External CSS, Internal CSS, dan Inline CSS serta kegunaannya dan kekurangannya yang bisa saya sampaikan pada artikel kali ini.

Semoga penjelasan di atas jelas dan bermanfaat bagi sobat sekalian dan banyak programmer lainnya.

Terima kasih, salam coding

Bang Feri Blog - Blogging and Coding