Perbedaan Internal, External dan Inline CSS Dalam Website

Perbedaan Internal, External dan Inline CSS Dalam Website

Mengenal CSS Lebih Dekat: Pengertian, Fungsi, TujuanJogja One SolutionCascading Style Sheets (CSS) adalah bahasa pemrograman yang dipakai untuk mendesain halaman depan atau tampilan website (front end). Dengan CSS, Anda dapat mengatur dan menentukan margin, mengubah jenis font, ukuran font, warna dan lain sebagainya. Berikut ini Perbedaan Internal, External dan Inline CSS Dalam Website

Apa Itu CSS

Bagi Anda yang belum tahu, CSS merupakan kepanjangan dari Cascading Style SheetsCSS adalah bahasa pemrograman dalam website yang memiliki fungsi untuk mendesain tampilan website agar lebih menarik. Dengan menggunakan CSS Anda bisa bebas mengatur jenis font, ukuran font, color, margin, padding, background, comment, link dan masih banyak lainnya.

Untuk saat ini CSS memiliki 3 versi yaitu CSS 1, CSS 2 dan CSS 3. CSS pertama kali muncul pada tahun 1996 yang keluarkan oleh World Wide Web Consortium (W3C) dan sekarang ini sudah versi ketiga. CSS 3 mendukung teknologi yang lebih canggih salah satunya hadirnya fitur animasi pada halaman website.

Jenis CSS

Dalam proses implementasi penulisan kode CSS, terdapat 3 jenis CSS yang bisa Anda praktekkan. Setiap metode penulisan memiliki kelebihan, kekurangan dan juga kegunaannya yang berbeda-beda. Nah berikut 3 jenis CSS yang perlu Anda tahu.

  1.   Internal CSS
  2.   External CSS
  3.   Inline CSS

Tidak perlu bingung apa perbedaan dari tiga jenis CSS tersebut, karena Kami akan membahasnya secara lengkap dan detail pada pembahasan dibawah ini:

1. Internal CSS

Jenis CSS yang pertama yang akan kita bahas adalah Internal CSS. Internal CSS adalah kode CSS yang ditulis dalam tag <style> dan lokasinya berada pada bagian atas header file HTML. Internal CSS digunakan untuk membuat custom khusus dalam satu halaman website sehingga halaman lain tidak terpengaruh.

Custom halaman dengan internal CSS ini cocok dipakai untuk Anda yang memiliki website dengan tampilan yang berbeda-beda. Jadi untuk Anda yang ingin membuat website unik dengan berbagai tampilan halaman website yang berbeda, maka inline CSS ini pilihan yang paling benar.

Kelebihan Internal CSS

  • Mudah dalam melakukan editing tiap halaman website
  • Tidak perlu melakukan upload file CSS karena masuk dalam file HTML
  • Class dan ID bisa dipakai oleh internal stylesheet
  • Mudah saat memperbaiki error CSS website

Kekurangan Internal CSS

  • Kurang efisien untuk penggunaan beberapa halaman website yang sama karena Anda harus menuliskan ulang.
  • Performa website menjadi lebih lambat karena setiap halaman memiliki CSS sendiri.
  • Ukuran file menjadi lebih besar karena setiap halaman memiliki CSS sendiri.

Contoh Internal CSS

Agar lebih jelasnya berikut Kami berikan contoh penulisan kode pada Inline CSS pada file HTML.

 <!DOCTYPE html>
<html>
<head>
  <title>Internal CSS dalam Website</title>
  <!-- contoh internal css dalam tag head -->
  <style type="text/css">
                h1 {
               text-align: center;
               font-family: arial;
               color: orange;
             }
             h2 {
               text-align: left;
               font-family: calibri;
               color: black;
             }
  </style>
</head>
<body>
             <!-- contoh internal css dalam tag body -->
  <style type="text/css">
   h1 {
  text-align: center;
  font-family: arial;
  color: orange;
             }
             h2 {
  text-align: left;
  font-family: calibri;
  color: black;
             }
  </style>
  <h1>Qwords.com</h1>
  <h2>Contoh Internal CSS</h2>
</body>
</html>
Contoh Internal CSS
Contoh Internal CSS

Bagaimana mudah bukan untuk mempraktekan caranya?

2. External CSS

Jenis CSS yang kedua adalah External CSS. External CSS adalah kode CSS yang penulisannya dipisah dengan file HTML. Jadi file CSS ditulis pada file sendiri dengan ekstensi .css. File External CSS biasa dituliskan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css.

Penggunaan External CSS lebih simple dan sederhana karena tidak perlu menuliskan CSS dalam setiap file HTML. Nah berikut kelebihan dan kekurangan serta contoh penulisan External CSS.

Kelebihan External CSS

  • Ukuran file HTML menjadi lebih kecil
  • Penulisan kode HTML menjadi lebih rapi
  • Loading website menjadi lebih cepat
  • File CSS bisa digunakan untuk beberapa halaman website berbeda

Kekurangan External CSS

  • Tidak cocok untuk halaman website yang membutuhkan halaman custom
  • Halaman website rawan berantakan saat file CSS gagal load dengan sempurna sehingga tampilan website berantakan.

Contoh External CSS

Untuk lebih jelasnya silahkan lihat pada contoh external CSS berikut ini:

 h1 {
               text-align: center;
               font-family: arial;
               color: orange;
             }
             h2 {
               text-align: left;
               font-family: calibri;
               color: orange;
             }
             h1 {
               text-align: center;
               font-family: arial;
               color: orange;
             }
             h2 {
               text-align: left;
               font-family: calibri;
               color: orange;
             }

Simpan file External CSS tersebut dengan nama style.css. Untuk bisa menggunakannya Anda perlu memanggil dengan kode tag <link>, berikut caranya.

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

Tag <link> adalah element untuk merujuk file CSS. rel=”stylesheet” menunjukan file yang dirujuk adalah stylesheet. type=”text/css” menunjukan tipe dari file dan yang terakhir href=”style.css” adalah nama file dari CSS External yang sudah dibuat.

Berikut contoh penempatan kode pada file HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS dalam Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Qwords.com</h1>
  <h2>Contoh External CSS</h2>
</body>
</html>

3. Inline CSS

Nah yang terakhir adalah Inline CSS. Inline CSS adalah memasukan kode CSS yang ditulis secara langsung pada setiap atribut HTML. Jadi setiap atribut memiliki style CSS yang berbeda tergantung kebutuhan .

Inline CSS ini tergolong kurang efisien jika dibandingkan jenis CSS untuk website lainnya. Karena dalam satu atribut memiliki style tersendiri, jadi inline cocok untuk website yang tidak membutuhkan banyak baris coding.

Kelebihan Inline CSS

  • Memudahkan dalam perbaikan atribut HTML
  • Membantu saat pengujian dan melihat perubahan pada satu elemen saja.
  • Load website menjadi lebih cepat dan HTTP request menjadi lebih kecil.

Kekurangan Inline CSS

  • Kurang efisien dalam penggunaan karena hanya bisa diterapkan pada satu atribut saja.
  • Kurang cocok untuk website dengan baris coding yang banyak

Contoh Inline CSS

Untuk lebih jelasnya berikut contoh penerapan Inline CSS:

<h1 style="color:orange; font-family: arial;">Qwords.com</h1>

JOGJA ONE SOLUTION – Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat