Tutorial Belajar CSS Part 3 -Menyisipkan CSS ke dalam Halaman Web Anda
Tutorial Belajar CSS Part 3: Menyisipkan CSS ke dalam Halaman Web Anda
Pada bagian ketiga dari tutorial ini, kita akan menjelaskan berbagai metode penyisipan CSS ke dalam halaman web Anda. Ini termasuk cara internal, eksternal, dan inline untuk menerapkan gaya ke elemen HTML.
1. CSS Internal
Penggunaan Tag <style>
Anda dapat menuliskan CSS langsung di dalam tag <style>
di bagian <head>
halaman web Anda.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Judul Halaman</h1>
<p>Contoh paragraf dengan gaya internal.</p>
</body>
</html>
2. CSS Eksternal
Penggunaan Berkas CSS Terpisah
Anda dapat membuat berkas CSS terpisah dan menyisipkannya ke dalam halaman web menggunakan tag <link>
di bagian <head>
.
Misalnya, berkas style.css berisi gaya yang akan diterapkan ke halaman.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Judul Halaman</h1>
<p>Contoh paragraf dengan gaya eksternal.</p>
</body>
</html>
3. CSS Inline
Penggunaan Atribut style
Anda dapat menambahkan gaya langsung ke elemen HTML menggunakan atribut style
.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: blue;">Judul Halaman</h1>
<p style="font-size: 16px;">Contoh paragraf dengan gaya inline.</p>
</body>
</html>
Manfaat dan Pertimbangan
- Internal CSS: Cocok untuk halaman kecil, namun mungkin membingungkan pada halaman yang lebih besar.
- Eksternal CSS: Memisahkan gaya dari struktur HTML, memungkinkan konsistensi dan kemudahan pemeliharaan.
- Inline CSS: Berguna untuk perubahan gaya sementara atau dalam konteks spesifik.
Kesimpulan
Memilih metode penyisipan CSS yang tepat bergantung pada kebutuhan dan kompleksitas halaman web Anda. Penggunaan internal, eksternal, atau inline CSS memiliki kelebihan dan kelemahan masing-masing. Pemisahan tata letak dan tampilan dengan CSS eksternal umumnya disarankan untuk pengelolaan yang lebih baik dan konsistensi gaya di seluruh situs web Anda.