Baricode LMS - Cara Menyisipkan CSS

Cara Menyisipkan CSS 🔗

Ada tiga cara untuk menghubungkan CSS dengan dokumen HTML. Masing-masing memiliki cara penulisan, kelebihan, dan kekurangan yang berbeda.

1. Inline CSS

Inline CSS ditulis langsung di dalam atribut style pada elemen HTML:

<h1 style="color: blue; font-size: 32px;">Judul Biru</h1>
<p style="color: gray; line-height: 1.8;">Paragraf abu-abu.</p>

Kelebihan:

Langsung terlihat efeknya
Berguna untuk pengujian cepat
Prioritas tinggi (mengalahkan external dan internal CSS)

Kekurangan:

Kode HTML menjadi berantakan dan sulit dibaca
Tidak bisa digunakan ulang — harus ditulis di setiap elemen
Sangat sulit dikelola pada proyek besar

2. Internal CSS

Internal CSS ditulis di dalam tag <style> yang diletakkan di bagian <head> dokumen HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>
  <style>
    body {
      background-color: #f9fafb;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #1d4ed8;
    }

    p {
      color: #6b7280;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Judul Halaman</h1>
  <p>Ini adalah paragraf.</p>
</body>
</html>

Kelebihan:

Tidak perlu file terpisah
CSS berlaku untuk seluruh elemen di satu halaman
Cocok untuk halaman tunggal atau prototype cepat

Kekurangan:

CSS tidak bisa digunakan di halaman lain
File HTML menjadi lebih besar
Sulit dikelola untuk banyak halaman

3. External CSS

External CSS ditulis di file .css terpisah, lalu dihubungkan ke HTML menggunakan tag <link>:

File: index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>External CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Judul Halaman</h1>
  <p>Ini adalah paragraf.</p>
</body>
</html>

File: style.css

body {
  background-color: #f9fafb;
  font-family: Arial, sans-serif;
}

h1 {
  color: #1d4ed8;
}

p {
  color: #6b7280;
  font-size: 16px;
}

Kelebihan:

Satu file CSS bisa digunakan oleh banyak halaman HTML
Pemisahan antara struktur (HTML) dan tampilan (CSS) yang bersih
Mudah dikelola dan dipelihara
Browser menyimpan file CSS di cache — halaman lebih cepat dimuat

Kekurangan:

Butuh request HTTP tambahan untuk memuat file CSS
Jika file CSS gagal dimuat, halaman tampil tanpa styling

Perbandingan Ketiga Metode

Metode	Lokasi Penulisan	Cakupan	Rekomendasi
Inline	Di atribut `style` elemen	Satu elemen saja	Hindari (kecuali darurat)
Internal	Di dalam `<style>` di `<head>`	Satu halaman	Prototype atau halaman tunggal
External	File `.css` terpisah	Seluruh situs	Selalu gunakan ini

Urutan Prioritas

Jika ada konflik antara ketiga metode, urutan prioritasnya adalah:

Inline CSS  >  Internal CSS  >  External CSS

<!-- External: p { color: green; } -->
<!-- Internal: -->
<style>
  p { color: blue; } /* mengalahkan external */
</style>

<!-- Inline mengalahkan semuanya -->
<p style="color: red;">Teks ini berwarna MERAH.</p>

💡 Tips: Selalu gunakan External CSS untuk proyek nyata. Pisahkan HTML dan CSS ke file yang berbeda agar kode lebih bersih, mudah dicari, dan bisa digunakan ulang di banyak halaman. Kebiasaan ini adalah tanda developer yang rapi dan profesional. ✨

Cara Menyisipkan CSS

Cara Menyisipkan CSS 🔗

1. Inline CSS

2. Internal CSS

3. External CSS

Perbandingan Ketiga Metode

Urutan Prioritas

Informasi Kursus

Pelajaran dalam Kategori Ini