🎨 Cara Menyisipkan CSS

CSS atau Cascading Style Sheets itu bisa dibilang "baju" buat HTML. Kalau HTML-nya cuma ngatur struktur atau isi halaman, CSS yang bikin tampilannya jadi menarik dan enak dilihat. Misalnya, mau kasih warna ke teks, ubah ukuran font, bikin tombol punya bayangan, atau atur elemen supaya rata di tengah—semua itu kerjaannya CSS.
Tanpa CSS, halaman web bakal kelihatan polos banget, kayak dokumen Word tanpa format. Nah, dengan CSS, kita bisa desain satu halaman atau bahkan seluruh website dengan gaya yang konsisten. Enaknya lagi, kita nggak perlu nulis gaya berulang-ulang. Tinggal atur satu kali, lalu bisa dipakai ke banyak elemen sekaligus.

Ada tiga cara buat pakai CSS di HTML:

Inline: langsung ditulis di tag HTML-nya. Cocok buat styling cepat atau satu elemen aja.
Internal: ditulis di bagian <style> dalam file HTML. Biasanya dipakai kalau halaman itu butuh gaya khusus.
External: disimpan di file terpisah (.css), lalu di-link ke HTML. Ini yang paling rapi dan efisien, apalagi buat proyek yang besar atau punya banyak halaman.

CSS itu penting banget kalau kamu mau bikin website yang tampilannya profesional dan nggak ngebosenin.

1️⃣ Inline CSS

CSS langsung ditulis pada atribut style di elemen HTML.

index.html

<p style="color: red;">Teks ini berwarna merah</p>

2️⃣ Internal CSS

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

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>Teks ini berwarna biru</p>
</body>
</html>

3️⃣ External CSS

CSS ditulis pada file terpisah (misalnya style.css) dan dihubungkan dengan tag <link>.

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Teks ini akan mengikuti file style.css</p>
</body>
</html>

⚙️ Demo Interaktif:

💡 Tips: Untuk proyek besar, gunakan external CSS agar lebih terorganisir dan mudah dipelihara.