Cara Menghubungkan External CSS dengan HTML
External CSS adalah cara menambahkan gaya (style) ke HTML melalui file CSS terpisah. Metode ini membuat kode lebih rapi dan mudah diatur, terutama untuk proyek yang besar atau website dengan banyak halaman.
🔗 Kenapa Harus Menggunakan External CSS?
- Memisahkan antara konten (HTML) dan desain (CSS)
- Mudah untuk mengatur tampilan seluruh website dari satu file
- File CSS bisa digunakan di banyak halaman sekaligus
📦 Contoh Struktur File HTML + External CSS
Misalkan kamu punya dua file: index.html dan style.css
/project-folder
├── index.html
└── style.css
🧾 Isi File style.css
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
font-size: 36px;
}
p {
color: #555;
line-height: 1.6;
}
🧾 Isi File index.html
<!DOCTYPE html>
<html>
<head>
<title>Website dengan External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah halaman yang menggunakan file CSS terpisah.</p>
</body>
</html>
🔄 Coba Jalankan:
🎯 Kesimpulan
- External CSS adalah metode terbaik untuk proyek menengah hingga besar
- Gunakan tag
<link>di dalam<head>HTML untuk menghubungkan file CSS - Pastikan nama file dan lokasi file CSS sesuai
🧪 Latihan Interaktif
Edit HTML di bawah dan bayangkan bahwa file style.css berada di folder yang sama:
📝 Tugas Praktik Mandiri
- Buat dua file:
style.cssdanlatihan.html - Tulis kode CSS di dalam
style.css - Hubungkan file CSS ke file HTML menggunakan
<link> - Ubah warna teks dan ukuran huruf sesuai kreativitasmu
- Buka file HTML di browser dan lihat hasilnya
Bonus: Tambahkan gaya pada elemen <a> (tautan) dan <button> di file CSS!