Hari 3: Cara Menyematkan CSS – Belajar CSS From Zero to Hero

by

Pelajari 3 cara menyematkan CSS ke HTML: inline, internal, dan external. Lengkap dengan contoh kode, studi kasus, serta tips pemula agar website lebih rapi.

Cara Menyematkan CSS – Belajar CSS From Zero to Hero

Kenapa Harus Tahu Cara Menyematkan CSS?

Belajar CSS tidak hanya soal mengetahui properti seperti color atau font-size. Hal yang lebih penting adalah bagaimana menyematkan CSS ke dalam halaman HTML dengan cara yang benar. Ada tiga metode utama yang bisa digunakan: inline CSS, internal CSS, dan external CSS.

Masing-masing cara punya kelebihan dan kekurangan. Mengetahui kapan menggunakan metode tertentu akan membuat kode lebih rapi, mudah dikelola, dan lebih profesional.

1. Inline CSS

Inline CSS adalah cara paling sederhana karena ditulis langsung pada elemen HTML menggunakan atribut style.

Contoh:

<p style="color: red; font-size: 18px;">Halo, saya teks dengan inline CSS!</p>

Kelebihan:

  • Mudah dan cepat digunakan.
  • Cocok untuk eksperimen kecil.

Kekurangan:

  • Sulit dikelola jika website besar.
  • Mengotori kode HTML (tidak bersih).
  • Tidak efisien jika style berulang.

2. Internal CSS

Internal CSS ditulis di dalam tag <style> pada bagian <head> file HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Judul dengan Internal CSS</h1>
  <p>Paragraf ini diatur dengan internal CSS.</p>
</body>
</html>

Kelebihan:

  • Style lebih terorganisir dibanding inline.
  • Cocok untuk halaman tunggal.

Kekurangan:

  • Tidak efisien jika banyak halaman.
  • File HTML bisa jadi panjang.

3. External CSS

External CSS ditulis dalam file terpisah (.css) dan dihubungkan dengan tag <link> pada file HTML.

Contoh:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>External CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Judul dengan External CSS</h1>
  <p>Paragraf ini diatur dengan external CSS.</p>
</body>
</html>
/* style.css */
h1 {
  color: green;
  text-align: center;
}
p {
  font-size: 18px;
  color: #333;
}

Kelebihan:

  • File CSS terpisah → HTML lebih bersih.
  • Bisa digunakan di banyak halaman.
  • Mudah dikelola untuk proyek besar.
  • Lebih SEO friendly (loading cepat & konsisten).

Kekurangan:

  • Butuh dua file (HTML & CSS).
  • Tidak cocok untuk prototyping cepat.

Perbandingan Inline, Internal, dan External CSS

MetodeCocok UntukKelebihanKekurangan
InlineTesting cepatPraktis, langsung terlihatKode berantakan, sulit dikelola
InternalHalaman tunggal kecilTerorganisir, lebih bersihTidak reusable antar halaman
ExternalWebsite besar & profesionalEfisien, mudah dikelola, SEO baikPerlu file terpisah

Studi Kasus: Mengubah Warna Tombol di Banyak Halaman

Misalnya kamu punya website dengan 10 halaman. Jika menggunakan inline CSS, kamu harus mengubah warna tombol satu per satu. Dengan internal CSS, kamu hanya mengubah di tiap halaman. Tetapi dengan external CSS, cukup ubah satu file style.css, maka semua tombol di seluruh website otomatis ikut berubah.

Inilah alasan mengapa external CSS menjadi standar industri untuk web development profesional.

Tips Praktis untuk Pemula

  1. Gunakan inline CSS hanya untuk testing cepat.
  2. Gunakan internal CSS jika proyek kecil atau latihan.
  3. Gunakan external CSS untuk proyek nyata agar lebih profesional.
  4. Biasakan membuat struktur folder seperti index.html dan folder css/style.css.
  5. Selalu gunakan external CSS untuk portofolio atau website klien.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kamu sudah belajar tiga cara menyematkan CSS ke HTML. Pada hari berikutnya, kita akan membahas CSS Syntax (selector, property, dan value) secara detail.
👉 Lanjut ke Hari 4: CSS Syntax

💡 Tantangan Hari 3:
Buatlah file index.html dan style.css. Hubungkan keduanya, lalu ubah warna background body dan teks paragraf. Dengan latihan ini, kamu akan memahami kenapa external CSS adalah pilihan terbaik untuk project web development.

Leave a Comment