CSS Penulisan

Tiga Cara Menambahkan CSS ke HTML

ada 3 cara untuk menambahkan css ke html:

Inline CSS
Internal CSS
Eksternal CSS

Inline CSS (langsung di tag HTML)

CSS ditulis di dalam atribut style pada tag HTML tertentu.

Kapan digunakan: untuk gaya yang sangat sederhana dan spesifik.

<p style="color: red; font-size: 18px;">Teks ini berwarna merah dan ukuran 18px.</p>

Kelebihan: cepat dan mudah.

Kekurangan: sulit dikelola jika digunakan banyak.

Internal CSS (di dalam tag Section titled “Internal CSS (di dalam tag pada file HTML)”

CSS ditulis di dalam elemen <style> yang diletakkan di bagian <head>.

Kapan digunakan: saat membuat halaman HTML tunggal atau proyek kecil.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }

    p {
      font-size: 16px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Halo Dunia</h1>
  <p>Ini adalah paragraf dengan CSS internal.</p>
</body>
</html>

Kelebihan: mudah diatur dalam satu file.

Kekurangan: tidak bisa digunakan ulang di halaman lain.

External CSS (menggunakan file CSS terpisah)

CSS ditulis dalam file terpisah berekstensi .css, lalu dihubungkan ke HTML menggunakan tag .

Kapan digunakan: untuk proyek besar dan multi-halaman.

File HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Judul Website</h1>
  <p>Ini adalah isi paragraf.</p>
</body>
</html>

File style.css:

h1 {
  color: green;
}

p {
  font-size: 18px;
}

Kelebihan: bisa digunakan ulang di banyak halaman.

Eksternal CSS paling direkomendasikan untuk proyek profesional.

Tips untuk Pemula

Selalu gunakan external CSS untuk proyek lebih besar agar kode rapi dan terpisah.
Gunakan internal CSS hanya jika kamu masih belajar atau membuat halaman tunggal.
Hindari penggunaan inline CSS secara berlebihan, karena bisa membuat kode sulit dirawat.
Simpan file CSS dengan ekstensi .css dan pastikan link-nya benar.
Gunakan tag <link> di dalam tag <head> untuk menghubungkan file CSS eksternal.

Kesimpulan

Cara	Cocok Untuk	Kelebihan	Kekurangan
Inline CSS	Uji coba cepat	Mudah digunakan	Sulit dikelola
Internal CSS	Halaman tunggal kecil	Tidak butuh file tambahan	Tidak reusable
External CSS	Proyek profesional	Bisa digunakan berulang-ulang	Perlu manajemen file lebih