Kalau kamu baru mulai belajar web development, mungkin sempat bingung: “Gimana sih cara nambahin CSS ke HTML?” Tenang aja, kamu nggak sendiri. Di artikel ini, kita akan bahas cara menambahkan CSS ke dalam HTML dengan lengkap dan gampang dipahami. Yuk langsung aja!
1. Tiga Cara Menambahkan CSS
CSS (Cascading Style Sheets) bisa ditambahkan ke HTML dengan tiga cara utama:
- External CSS: Pakai file terpisah
- Internal CSS: Ditulis langsung di bagian
<head>HTML - Inline CSS: Langsung ditulis di tag HTML
Setiap cara punya kelebihan dan kekurangannya, tergantung kebutuhanmu. Kita bahas satu per satu, ya!
2. External CSS
Ini cara paling sering dipakai di dunia nyata (alias di project beneran). Kamu cukup bikin file .css terpisah, lalu hubungkan ke file HTML-mu.
Contoh:
style.css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>Hasilnya:
Kelebihan:
- Rapi dan terorganisir
- Bisa dipakai di banyak halaman HTML
- Mudah dikelola kalau project-nya besar
3. Internal CSS
Kalau kamu cuma punya satu halaman HTML, kamu bisa pakai internal CSS. Caranya, tambahkan kode CSS di dalam tag <style> di bagian <head>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Selamat datang!</h1>
</body>
</html>Hasilnya:
Kelebihan:
- Praktis untuk halaman tunggal
- Cocok buat testing cepat
4. Inline CSS
Inline CSS ditulis langsung di dalam tag HTML. Misalnya kamu mau bikin satu elemen dengan gaya khusus tanpa bikin style terpisah.
Contoh:
<h1 style="color: red; font-size: 24px;">Judul Ini Merah</h1>Hasilnya:
Kelebihan:
- Cocok untuk styling cepat dan spesifik
- Bisa override style lain (tapi hati-hati ya…)
Kekurangan:
- Susah dirawat kalau banyak
- Bikin HTML jadi berantakan
5. Multiple Style Sheets
HTML bisa menggunakan lebih dari satu file CSS. Misalnya kamu punya satu file untuk style umum dan satu lagi untuk dark mode.
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="darkmode.css">
</head>Kalau ada style yang sama di dua file, maka aturan cascading berlaku (dibahas di bawah!).
6. Urutan Prioritas (Cascading Order)
“Cascading” di CSS artinya: kalau ada beberapa style yang bertabrakan, browser akan memilih salah satu berdasarkan urutan prioritas berikut:
- Inline CSS (paling tinggi)
- Internal CSS (di
<style>) - External CSS (paling rendah)
- Urutan munculnya (yang ditulis terakhir akan menang)
- Spesifisitas selector (ID > class > tag)
- !important (kalau kamu pakai ini, pasti menang — tapi jangan disalahgunakan ya!)
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p style="color: red;">Tebak warna teks ini?</p>
</body>
</html>Hasilnya:
Teksnya bakal merah, karena inline style punya prioritas tertinggi.
Kesimpulan
Menambahkan CSS ke HTML bisa dilakukan dengan tiga cara: external, internal, dan inline. Untuk project besar, external CSS paling direkomendasikan karena lebih rapi dan mudah dirawat. Tapi, jangan lupa pahami juga cara kerja cascading order, biar style-mu nggak saling tabrakan.
Semoga artikel ini bisa bikin kamu lebih pede ngoding tampilan web! Kalau kamu butuh tutorial lainnya, tinggal komentar aja ya!
Komentar