CSS1 / 62

Tiga Cara Memasang CSS

Sebelum menulis satu aturan pun, kamu perlu tahu bagaimana CSS menempel ke HTML. Ada tiga cara: inline lewat atribut style langsung di elemen, internal lewat tag <style> di dalam <head>, dan external lewat <link rel="stylesheet" href="style.css"> yang menunjuk berkas terpisah. Cara ketiga yang dipakai di semua proyek nyata, karena satu berkas bisa melayani ratusan halaman, bisa disimpan cache browser, dan gaya tidak bercampur dengan struktur. Inline style dihindari karena specificity-nya sangat tinggi sehingga sulit ditimpa, dan gayanya tidak bisa dipakai ulang.

👀 Contoh dulu

<!-- inline: sulit dirawat, specificity tertinggi -->
<p style="color: red">Teks</p>

<!-- internal: hanya untuk satu halaman -->
<style>
  p { color: red; }
</style>

Hasilnya: Keduanya menghasilkan teks merah, tapi versi inline harus diulang di setiap elemen.

💡 External stylesheet menang karena bisa dipakai ulang dan disimpan cache — dua hal yang tidak bisa dilakukan inline style.

📝 Sekarang giliranmu

Halamanmu perlu memuat berkas gaya bernama style.css yang berada satu folder dengan HTML-nya. Tulis satu elemen <link> di dalam <head> yang memasang berkas itu sebagai stylesheet.

Preview