Cara Menyisipkan CSS ke dalam HTML

Februari 04, 2025

Halo teman-teman!

Setelah sebelumnya kita mengenal simple selectors dalam CSS, sekarang kita akan belajar gimana cara menyisipkan CSS ke dalam halaman HTML. Ini adalah salah satu pondasi penting supaya semua style yang kita buat bisa tampil di browser.

Bayangin kamu lagi milih outfit buat website kamu — CSS itulah yang ngatur gaya tampilannya. Nah, untuk “memakaikan” CSS itu ke halaman HTML, kita punya tiga cara utama: inline CSS, internal CSS, dan external CSS. Masing-masing punya kelebihan dan situasi pemakaian yang berbeda.

Tiga cara menyisipkan CSS ke HTML ditampilkan seperti lemari baju: aksesori (inline), pakaian unik (internal), dan desain khusus dari penjahit (external).

Inline CSS

Inline CSS digunakan langsung di dalam elemen HTML, lewat atribut style. Biasanya dipakai kalau kita cuma ingin mengatur satu atau dua properti secara cepat.

Contoh:

<h1 style="color: blue; text-align: center;">Halo Dunia!</h1>

Kelebihan:

  • Cepat dan langsung terlihat hasilnya

  • Cocok untuk perubahan kecil atau styling darurat

Kekurangan:

  • Kurang rapi kalau digunakan banyak

  • Sulit untuk pemeliharaan jangka panjang

Internal CSS

Internal CSS ditulis di bagian <head> dalam file HTML. Gaya yang dibuat akan berlaku untuk seluruh halaman, dan tidak memerlukan file terpisah.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: linen;
    }
    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>
  <h1>Selamat Datang!</h1>
  <p>Ini contoh internal CSS.</p>
</body>
</html>

Kelebihan:

  • Gaya langsung terhubung dengan HTML

  • Cocok untuk proyek kecil atau satu halaman saja

Kekurangan:

  • Tidak bisa dipakai ulang di halaman lain

External CSS

Ini adalah cara paling umum dan direkomendasikan untuk proyek berskala besar. CSS ditulis di file terpisah (biasanya berekstensi .css) dan dipanggil ke HTML menggunakan tag <link>.

Contoh file HTML:

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

Isi file style.css:

body {
  background-color: #f0f0f0;
}
h1 {
  color: navy;
}

Kelebihan:

  • Bisa dipakai ulang di banyak halaman

  • Memudahkan pengelolaan dan perawatan

  • File HTML tetap bersih dan ringan

Kekurangan:

  • Butuh satu file tambahan

  • Perlu koneksi antara HTML dan CSS yang benar

Urutan Prioritas (Cascading Order)

Ketika ada lebih dari satu jenis CSS yang diterapkan ke elemen yang sama, browser akan mengikuti aturan urutan prioritas:

  1. Inline CSS akan menang atas semuanya

  2. Internal CSS akan menimpa external CSS jika muncul setelahnya

  3. External CSS akan berlaku selama tidak ditimpa oleh dua jenis di atas

Contoh situasi:

  • Jika style.css menetapkan warna biru untuk h1, tapi internal CSS menetapkan warna oranye, maka h1 akan berwarna oranye (karena internal muncul setelah external).

  • Tapi kalau elemen h1 juga punya inline CSS style="color: green;", maka warna hijau yang menang.

Tips Memilih Jenis CSS yang Tepat

  • Gunakan inline CSS hanya jika sangat dibutuhkan dan hanya untuk satu elemen

  • Gunakan internal CSS untuk halaman tunggal atau prototipe

  • Gunakan external CSS untuk website dengan banyak halaman atau proyek jangka panjang

Yuk Coba Sendiri!

Kamu bisa mulai dengan membuat tiga file HTML berbeda, lalu coba masing-masing teknik: satu dengan inline CSS, satu dengan internal CSS, dan satu lagi dengan external CSS. Bandingkan hasilnya, dan lihat mana yang menurutmu paling nyaman untuk dipakai.

Dengan menguasai cara menyisipkan CSS ini, kamu sudah selangkah lebih dekat untuk jadi master styling web!

Di materi selanjutnya, kita akan bahas tentang bagaimana menambahkan komentar di dalam CSS agar kode kamu makin rapi dan mudah dipahami.

Tidak ada komentar