Belajar HTML - Menyisipkan Gaya Menggunakan CSS dan Atribut Inline
Episode ini membedah tiga cara menyisipkan CSS ke HTML: atribut style inline, elemen style internal, dan link ke stylesheet eksternal, lengkap dengan aturan prioritas dan spesifisitas.
#Pendahuluan
Sejak episode 1 kalian tahu bahwa CSS adalah lapisan presentasi yang bekerja di atas HTML. Episode 13 membahas menyisipkan gaya menggunakan CSS dan atribut inline — tiga cara menghubungkan stylesheet ke dokumen, kapan memakai yang mana, dan bagaimana browser menentukan gaya mana yang menang.
Pemahaman tiga metode ini penting karena setiap metode punya kasus pakai berbeda. Menulis gaya di tempat yang salah membuat halaman sulit dipelihara — dan pemeliharaan adalah tema besar di episode 19.
#Tiga Cara Menyisipkan CSS
#Atribut style (Inline)
Cara pertama: menulis gaya langsung pada elemen lewat atribut style:
<p style="color: blue; font-size: 18px;">
Paragraf dengan gaya inline.
</p>Nilai atribut berisi deklarasi CSS yang dipisahkan titik koma. Gaya inline hanya berlaku untuk satu elemen, tidak bisa dipakai ulang, dan mencampur konten dengan presentasi. Gunakan untuk pengujian cepat — bukan untuk produksi.
#Elemen style (Internal)
Cara kedua: blok style di dalam head, berisi aturan CSS biasa:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Gaya Internal</title>
<style>
p {
color: #374151;
line-height: 1.6;
}
</style>
</head>
<body>
<p>Paragraf yang dihias lewat blok style internal.</p>
</body>
</html>Gaya internal berlaku untuk seluruh dokumen, tapi hanya dokumen itu. Cocok untuk halaman tunggal atau saat membangun prototipe cepat.
#Link ke Stylesheet Eksternal (Eksternal)
Cara ketiga: memisahkan CSS ke file sendiri dan menghubungkannya dengan link:
<head>
<link rel="stylesheet" href="css/style.css">
</head>Pola link rel="stylesheet" href="css/style.css" menghubungkan style.css ke halaman. Ini metode yang direkomendasikan untuk semua project nyata: CSS terpusat, mudah dipelihara, dan bisa di-cache oleh browser.
#Prioritas dan Spesifisitas
#Siapa yang Menang
Ketika beberapa aturan menargetkan elemen yang sama, browser memakai sistem prioritas:
- Gaya inline (
styleatribut) menang atas semua selector. - Aturan dengan selector lebih spesifik menang atas yang generik.
- Jika sama spesifiknya, aturan yang ditulis paling akhir menang.
<style>
p {
color: red;
}
</style>
<p style="color: green;">Warna hijau menang karena inline.</p>Paragraf di atas berwarna hijau — gaya inline mengalahkan selector p di blok style. Urutan menang ini penting saat menggabungkan beberapa stylesheet.
#Pentingnya Urutan Link
Untuk stylesheet eksternal, urutan link di head menentukan siapa yang menang ketika spesifisitas sama. Stylesheet yang ditautkan belakangan menimpa yang lebih awal.
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">Aturan yang sama spesifiknya di style.css akan menang karena ditautkan setelah reset.css. Biasakan menautkan stylesheet dasar lebih dulu, lalu stylesheet utama.
#Kapan Memakai Metode Mana
#Pedoman Praktis
- Eksternal untuk semua gaya utama project — dapat dipakai ulang dan mudah dirawat.
- Internal untuk halaman yang benar-benar mandiri atau saat eksperimen.
- Inline hanya untuk pengecualian kecil atau pengujian cepat.
Menulis semua gaya inline untuk seluruh halaman membuat markup kembung dan sulit diubah. Jika kalian menemukan atribut style berulang di banyak elemen, itu tanda bahwa gaya seharusnya dipindah ke stylesheet.
#Latihan: Halaman Berwarna
Coba ketiga metode sekaligus:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praktik CSS</title>
<style>
h1 {
text-align: center;
color: #1f2937;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Praktik Menyisipkan Gaya</h1>
<p>Paragraf yang diatur oleh style.css eksternal.</p>
<p style="font-weight: bold;">Paragraf dengan gaya inline.</p>
</body>
</html>Buat css/style.css dengan aturan untuk p, lalu perhatikan di DevTools kolom mana deklarasi berasal. Kalian juga bisa memastikan stylesheet termuat dengan curl -s http://localhost:8080/css/style.css.
#Kesalahan Umum dan Solusinya
#Semua Gaya Inline
Gaya inline sulit dipelihara dan memenangkan semua konflik. Gunakan hanya untuk pengecualian; pindahkan yang berulang ke stylesheet.
#Link di Tempat Salah
link stylesheet harus berada di head. Meletakkannya di body membuat dokumen tidak valid dan bisa menunda pemuatan gaya.
#Penutup
Episode 13 menghubungkan lapisan presentasi ke struktur: tiga cara menyisipkan CSS, aturan prioritas inline versus selector, dan pedoman kapan memakai metode mana.
Inti yang harus dibawa pulang:
- Inline memakai atribut
style; internal memakai blokstyle; eksternal memakailink. - Gaya inline menang atas selector mana pun.
- Stylesheet yang ditautkan belakangan menang saat spesifisitas sama.
- Eksternal untuk produksi, internal untuk halaman tunggal, inline untuk pengecualian.
- Urutan
linkdiheadmenentukan hasil konflik gaya.
Di episode 14 selanjutnya kita akan membahas memasukkan JavaScript dengan script, defer dan async — elemen script, urutan eksekusi, dan strategi pemuatan yang tidak memblokir render halaman.