Pakai Inline, Internal, atau External CSS

Pendahuluan

Setidaknya ada 3 cara untuk menambahkan CSS ke dalam kode HTML. Masing-masing cara memiliki kegunaannya sendiri-sendiri.

☐ Inline CSS
☐ Internal CSS
☐ External CSS
☐ Perbandingan di antara ketiga cara tersebut

Sebetulnya, hampir di semua keadaan, saya akan menyarankan untuk menggunakan external CSS (menempatkan kode CSS pada file terpisah dari HTML). Namun, dalam praktiknya di pekerjaan, akan sering dijumpai keadaan di mana kamu membutuhkan cara-cara lainnya.

**1. Inline CSS: Untuk Style Cepat pada Satu Elemen**

Jika kamu hanya perlu menerapkan style pada satu elemen HTML spesifik saja (misalnya untuk paragraf tertentu satu itu saja), inline CSS adalah pilihan yang tepat. Caranya, cukup tambahkan atribut style langsung di elemen HTML yang ingin diubah.

Contoh:

<p style="color: blue; font-size: 18px;">Ini teks biru dengan ukuran 18px.</p>

Kapan dipakai?
✅ Untuk perubahan cepat pada elemen tertentu.
❌ Tidak cocok jika style yang sama perlu diterapkan pada banyak elemen.

Catatan: Inline CSS cocok untuk eksperimen cepat, namun tidak efisien untuk proyek besar karena style harus diterapkan secara manual di setiap elemen.

**2. Internal CSS: Menyimpan Style di Dalam Halaman**

Jika kamu ingin menerapkan style pada beberapa elemen dalam satu file/halaman HTML, internal CSS mungkin bisa jadi pilihan yang tepat. CSS ditulis di dalam tag <style> di bagian <head> halaman HTML.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>Selamat Datang!</h1>
    <p>Ini halaman dengan *style* CSS internal.</p>
  </body>
</html>

Kapan dipakai?
✅ Untuk proyek kecil atau halaman web yang hanya membutuhkan satu set style saja.
❌ Tidak ideal untuk proyek besar dengan banyak halaman.

Catatan: Internal CSS lebih mudah dikelola dalam halaman tunggal, namun bisa menyulitkan saat skala proyeknya berkembang. Kalau proyek kamu tersusun oleh banyak halaman web, apa ya nggak ribet kalau kamu harus ubah setiap file untuk ubah warna background (misalnya).

**3. External CSS - Styling Banyak Halaman Sekaligus**

Jika kamu mengerjakan proyek yang memerlukan konsistensi style di banyak halaman, external CSS adalah pilihan terbaik. Style disimpan dalam file CSS terpisah dan dihubungkan ke HTML menggunakan tag <link>.

Contoh HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini halaman dengan style CSS eksternal.</p>
  </body>
</html>

Contoh File style.css:

body {
  background-color: #ffffff;
  font-family: 'Verdana', sans-serif;
}
h1 {
  color: #007bff;
}

Kapan dipakai?
✅ Untuk proyek besar atau jika ingin memisahkan struktur dan style.
❌ Kurang praktis untuk halaman sederhana atau proyek kecil.

Catatan: Dengan external CSS, kamu cukup ubah satu file style.css saja untuk merubah style pada semua file HTML yang menggunakannya.

Kapan Pakai yang Mana?

Inline CSS: Untuk perubahan cepat dan spesifik pada elemen tertentu.
Internal CSS: Untuk halaman tunggal atau saat eksperimen.
External CSS: Untuk proyek besar yang membutuhkan konsistensi dan kemudahan pemeliharaan.

Aspek	Inline CSS	Internal CSS	External CSS
Lokasi Penulisan	Langsung di elemen HTML (atribut `style`)	Di dalam tag `<style>` di bagian `<head>`	Di dalam file CSS terpisah
Cocok untuk	Perubahan cepat pada elemen tertentu	Halaman kecil atau eksperimen pada satu halaman	Proyek besar, banyak halaman
Kemudahan Pemeliharaan	Sulit, karena style ada di setiap elemen	Sedikit lebih mudah, tapi masih dalam satu halaman	Sangat mudah, cukup di satu file untuk seluruh halaman
Skalabilitas	Tidak skalabel, harus diulang untuk setiap elemen	Tidak efisien untuk banyak halaman	Sangat efisien dan terkelola dengan baik
Waktu Load	Lebih cepat untuk halaman kecil, tapi berpotensi memperlambat dengan banyak elemen	Memiliki waktu load lebih baik daripada inline, tapi lebih lambat dari external	Biasanya paling cepat setelah file pertama kali dimuat (karena cache)
Praktik Penggunaan	Untuk eksperimen atau style yang hanya digunakan sekali	Untuk halaman yang memiliki beberapa style tapi tidak perlu file terpisah	Untuk proyek dengan banyak halaman atau jika ingin memisahkan konten dan style
Contoh Penggunaan	`<p style="color: red;">Text</p>`	`<style> p { color: red; } </style>`	`<link rel="stylesheet" href="style.css">`

Penutup

Sekarang kamu sudah paham perbedaannya dan tahu kapan harus menggunakannya? Silahkan tinggalkan komentar bila ada tanggapan. Terus eksplorasi, eksperimen, dan berkarya!