Metode 1: Inline Style
Metode inline style adalah cara paling sederhana untuk menerapkan CSS. Anda cukup menambahkan atribut style langsung ke dalam tag HTML yang ingin Anda format.
Contoh Penggunaan:
<p style="color: blue; font-size: 18px;">Ini adalah contoh teks yang diformat dengan inline style.</p>
Kelebihan:
- Mudah dan Cepat: Sempurna untuk perubahan kecil yang hanya memengaruhi satu elemen.
- Prioritas Tertinggi: Gaya yang diterapkan dengan inline style akan mengesampingkan gaya dari metode lain, menjadikannya berguna untuk pengujian atau modifikasi cepat.
Kekurangan:
- Tidak Efisien: Jika Anda memiliki banyak elemen yang ingin diformat sama, Anda harus menulis ulang kode yang sama berkali-kali.
- Sulit Dikelola: Kode HTML Anda akan menjadi berantakan dan sulit dibaca jika terlalu banyak inline style.
- Tidak Bisa Digunakan Ulang: Gaya tidak bisa digunakan kembali untuk elemen lain.
Metode 2: Internal Style Sheet
Metode internal style sheet adalah cara lain untuk menghubungkan HTML dan CSS. Anda menulis semua aturan CSS di dalam tag <style> yang ditempatkan di bagian <head> dokumen HTML.
Contoh Penggunaan:
<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheet</title>
<style>
h1 {
color: green;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Selamat datang!</h1>
<p>Ini adalah contoh paragraf.</p>
</body>
</html>
Kelebihan:
- Lebih Terorganisir: Semua gaya terkumpul di satu tempat, memudahkan pengelolaan.
- Efektif untuk Halaman Tunggal: Ideal jika gaya yang Anda buat hanya berlaku untuk satu halaman web saja.
Kekurangan:
- Kurang Fleksibel: Gaya tidak bisa digunakan kembali di halaman HTML lain.
- Meningkatkan Ukuran File: Dokumen HTML akan menjadi lebih besar karena berisi kode CSS.
Metode 3: External Style Sheet
Metode external style sheet adalah cara yang paling direkomendasikan dan profesional. Anda membuat file CSS terpisah (dengan ekstensi .css) dan menautkannya ke dokumen HTML menggunakan tag <link> di bagian <head>.
Contoh Penggunaan:
File style.css:
body {
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 1rem;
line-height: 1.6;
}
File index.html:
<!DOCTYPE html>
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>Ini adalah halaman web dengan gaya dari file eksternal.</p>
</body>
</html>
Kelebihan:
- Pemisahan Tanggung Jawab: HTML murni untuk struktur, dan CSS murni untuk tampilan.
- Dapat Digunakan Kembali: Satu file CSS bisa digunakan untuk banyak halaman HTML, menghemat waktu dan usaha.
- Mudah Dikelola: Jika Anda ingin mengubah tampilan seluruh situs web, Anda hanya perlu mengedit satu file CSS.
Kekurangan:
- Membutuhkan Permintaan HTTP Tambahan: Browser perlu mengunduh file CSS secara terpisah, yang bisa menambah waktu muat halaman, meskipun dampaknya biasanya sangat kecil.
Kesimpulan
Setiap metode memiliki tujuannya masing-masing. Inline style cocok untuk perubahan cepat pada satu elemen, internal style sheet ideal untuk gaya yang hanya berlaku pada satu halaman, sedangkan external style sheet adalah metode terbaik untuk pengembangan situs web yang besar dan profesional. Menggunakan external style sheet adalah praktik terbaik yang akan membantu Anda menjaga kode tetap bersih, terorganisir, dan mudah dikelola dalam jangka panjang.
