Apa Perbedaan Internal, External dan Inline CSS?

By | February 14, 2019
0 Comment

Cascading Style Sheets (CSS) yakni bahasa pemrograman yang dimanfaatkan bagi mendesain halaman depan atau tampilan situs (front end). Dengan CSS, Sahabat dapat mengatur dan menentukan margin, mengubah jenis font, ukuran font, warna dan lain sebagainya.

Di CSS ada tiga cara penulisan kode yaitu:

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

Setiap cara penulisan kode CSS mempunyai kelebihan, kekurangan, serta manfaatnya yang berbeda-beda.

Nah! Di artikel kali ini, kami akan membahas perbedaan dari tiga cara penulisan kode CSS. Termasuk kelebihan, kekurangan, manfaat, dan contoh dari penempatan kode CSS. Simak perbedaanya berikut ini.

Internal CSS

Internal CSS yakni kode CSS yang ditulis di pada tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan bagi merancang tampilan di satu halaman situs dan tak digunakan di halaman situs yang lain.

Cara ini akan benar-benar cocok dimanfaatkan bagi menjadikan halaman web dengan tampilan yang berbeda. Dengan kata lain, Internal CSS ini dapat dimanfaatkan bagi menjadikan tampilan yang unik, di setiap halaman situs.

Manfaat Internal CSS

  • Perubahan di Internal CSS hanya berlaku di satu halaman saja.
  • Sahabat tak perlu mengerjakan upload beberapa file karena HTML dan CSS berada pada satu file.
  • Class dan ID dapat digunakan oleh internal stylesheet.

Kekurangan Internal CSS

  • Tak efisien apabila Sahabat ingin menggunakan CSS yang sama pada beberapa file.
  • Merancang performa situs lebih lemot. Karena, CSS yang berbeda-beda akan mengakibatkan loading ulang setiap kali Sahabat ganti halaman situs. 

Contoh Internal CSS

Berikut ini yakni contoh penempatan Internal CSS di file HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- contoh internal css pada tag head -->
  <style type=text/css>
    p{
      font-family: arial;
      line-height: 2.75em;
      font-size: 16px;
    }
    i { 
      font-family: arial;
      color: blue;
    }
  </style>
</head>

<body>
  <!-- contoh internal css pada tag body -->
  <style type=text/css>
    h2 { 
      font-family: arial;
      color: #1B9CFC;
    }
  </style>
  <h2>Niagahoster</h2>
</body>
</html>

Baca pun: Cara Membuat Menu Dropdown CSS Mudah

External CSS

Eksternal CSS yakni kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> di halaman.

Cara ini lebih sederhana dan simpel daripada menambahkan kode CSS di setiap unsur HTML yang ingin Sahabat atur tampilannya. 

Manfaat External CSS

  • Ukuran file HTML akan menjadi lebih kecil dan struktur dari kode HTML jadi lebih rapi.
  • Loading situs menjadi lebih cepat.
  • File CSS dapat digunakan di beberapa halaman situs sekaligus. 

Kekurangan External CSS

  • Halaman akan menjadi berantakan, ketika file CSS gagal dipanggil oleh file HTML. Hal ini terjadi disebabkan karena koneksi internet yang lambat.

Contoh External CSS

Berikut ini yakni contoh penempatan External CSS di file HTML. Selaku contoh saya merancang file CSS dengan nama style.css berikut isi kode style.css.

p {
    font-family: arial;
    line-height: 2.75em;
}

i {
    font-family: arial;
    color: orange;
}

h2 {
    font-family: arial;
    color: #1B9CFC;
}

Bagi menggunakan file style.css pada HTML, Sahabat perlu menambahkannya ke pada file HTML. Dengan menggunakan tag <link> berikut contohnya.

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

Berikut ini penempatan kode pada satu file HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel=stylesheet type=text/css href=style.css>
</head>
<body>
    <h2>Niagahoster</h2>
</body>
</html>

Baca pun: Cara Menambahkan Custom Javascript dan CSS di WordPress

Inline CSS

Inline CSS yakni kode CSS yang ditulis seketika di atribut unsur HTML. Setiap unsur HTML mempunyai atribut style, di situ lah inline CSS ditulis.

Cara ini kurang efisien karena setiap tag HTML yang diberikan mesti mempunyai style masing-masing. Sahabat akan lebih sulit pada mengatur situs seandainya hanya menggunakan inline CSS. Karena, Inline CSS digunakan hanya bagi mengubah satu unsur saja.

Manfaat Inline CSS

  • Betul-betul menolong ketika Sahabat hanya ingin menguji dan melihat perubahan di satu unsur.
  • Bermanfaat bagi memperbaiki kode dengan cepat.
  • Proses permintaan HTTP yang lebih kecil dan proses load situs akan lebih cepat.

Kekurangan Inline CSS

  • Tak efisien karena Inline CSS hanya dapat dipakai di satu unsur HTML.

Contoh Inline CSS

Berikut ini yakni contoh penempatan kode dari Inline CSS:

<h2 style=color:blue; font-family: arial;>Niagahoster</h2>

Kesimpulan

Hingga di sini, semoga Sahabat paham mengenai pengertian perbedaan Internal, External dan Inline CSS. Jikalau ada pertanyaan atau tambahan lain silakan tinggalkan komentar lewat kolom di bawah ini. Jangan lupa subscribe dan follow sosial media kami bagi memperoleh informasi seputar VPS, hosting, Internet marketing, dan teknologi.


Sumber https://niagahoster.co.id/