3 Cara Menyisipkan CSS – Digital Learning

Belajar CSS lewat Codepen.io – Tingkat Dasar

1. Inline CSS

CSS ditulis langsung di dalam atribut style pada tag HTML.

<p style="color: red;">Ini paragraf dengan inline CSS.</p>

✅ Kelebihan: cepat, cocok untuk perubahan kecil
❌ Kekurangan: tidak teratur, sulit dipelihara

2. Internal CSS

CSS ditulis di dalam tag <style> di bagian <head> dokumen HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Ini paragraf dengan internal CSS.</p>
</body>
</html>

✅ Kelebihan: terorganisir, cocok untuk halaman tunggal
❌ Kekurangan: tidak bisa digunakan ulang di banyak halaman

3. Eksternal CSS

CSS ditulis di file terpisah (.css), lalu dihubungkan ke file HTML menggunakan <link>.

<!-- di dalam file HTML -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* isi file style.css */
p {
  color: green;
  font-family: Arial;
}

✅ Kelebihan: bisa digunakan ulang, terpisah dan rapi
❌ Kekurangan: perlu dua file, tidak cocok untuk latihan cepat di CodePen

❗ Catatan: Di CodePen, eksternal CSS bisa ditulis di tab CSS, jadi cukup fokus pada inline dan internal untuk awal pembelajaran.