HTML CSS

HTML Dasar: Mengenal CSS (Cascading Style Sheets)

Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari elemen HTML seperti warna, ukuran teks, jarak antar elemen, dan lain-lain.

Inline CSS

Inline CSS adalah gaya (style) yang langsung dituliskan di dalam tag HTML menggunakan atribut style.

Contoh:

<p style="color: blue; font-size: 20px;">Teks ini berwarna biru dan berukuran 20px.</p>

Cocok untuk styling cepat dan hanya satu elemen, tidak direkomendasikan untuk penggunaan banyak elemen karena sulit dikelola.

Internal CSS

Internal CSS adalah gaya yang dituliskan di dalam tag <style> di bagian <head> dari dokumen HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f9f9f9;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: green;
    }

    p {
      color: #333;
    }
  </style>
</head>
<body>

  <h1>Judul Halaman</h1>
  <p>Ini adalah paragraf dengan gaya internal CSS.</p>

</body>
</html>

Cocok untuk proyek kecil atau saat ingin mengatur gaya dalam satu halaman HTML saja.

External CSS

External CSS adalah gaya yang ditulis dalam file terpisah dengan ekstensi .css, kemudian dihubungkan ke file HTML dengan tag <link>.

Langkah 1: Buat file CSS (misalnya style.css)

body {
  background-color: #e0f7fa;
  font-family: 'Segoe UI', sans-serif;
}

h1 {
  color: #00796b;
}

p {
  font-size: 16px;
}

Langkah 2: Hubungkan ke HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css" />
  <title>Contoh External CSS</title>
</head>
<body>

  <h1>Ini Judul dengan External CSS</h1>
  <p>Paragraf ini mendapatkan style dari file CSS terpisah.</p>

</body>
</html>

Ini adalah metode paling disarankan, karena:

Lebih mudah dikelola
Dapat digunakan kembali di banyak halaman
Memisahkan struktur (HTML) dan gaya (CSS)

Perbandingan Singkat

Metode	Keuntungan	Kekurangan
Inline CSS	Cepat dan mudah untuk 1 elemen	Sulit dikelola, tidak rapi
Internal CSS	Mudah dikontrol di 1 halaman	Tidak bisa dipakai lintas halaman
External CSS	Profesional dan efisien	Butuh file tambahan (.css)

Kesimpulan

Gunakan inline CSS hanya untuk styling cepat dan kecil.
Gunakan internal CSS untuk halaman tunggal.
Gunakan external CSS untuk proyek lebih besar dan profesional.
CSS membuat halaman web lebih menarik dan responsif.