Cara Menghubungkan Inline CSS dengan HTML
Inline CSS adalah cara memberikan gaya langsung pada elemen HTML menggunakan atribut style. Metode ini cocok untuk perubahan cepat pada satu elemen.
🔍 Kapan Menggunakan Inline CSS?
- Untuk memberi style pada satu elemen secara spesifik
- Saat ingin mencoba tampilan cepat tanpa menulis kode CSS terpisah
- Ketika proyek masih kecil dan belum membutuhkan struktur CSS yang kompleks
📦 Contoh Kode Inline CSS
Kode berikut menunjukkan penggunaan inline CSS pada elemen <h1> dan <p>:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline CSS</title>
</head>
<body>
<h1 style="color: blue; font-size: 28px;">Judul dengan Inline CSS</h1>
<p style="color: gray; font-family: Arial;">
Ini adalah paragraf dengan gaya langsung menggunakan atribut style.
</p>
</body>
</html>
🔄 Coba Jalankan:
🎯 Kesimpulan
- Inline CSS cocok untuk gaya sederhana dan cepat
- Style ditulis langsung di dalam atribut
style="" - Tidak disarankan untuk proyek besar karena sulit dikelola
🧪 Latihan Interaktif
Ganti teks dan warna pada elemen di bawah ini, lalu klik Jalankan untuk melihat hasilnya:
📝 Tugas Praktik Mandiri
- Buat file HTML baru bernama
inline-css.html - Tambahkan elemen
h1danpdengan gaya berbeda menggunakanstyle - Ganti warna, ukuran font, atau jenis huruf sesuai kreativitasmu
- Simpan file dan buka di browser untuk melihat hasilnya
- Ambil tangkapan layar (screenshot) tampilan akhir halaman
Bonus: Tambahkan elemen lain seperti <button> dan beri style dengan inline CSS!