Memahami 3 Cara Menautkan CSS: Inline, Internal, dan External
CSS
(Cascading Style Sheets) adalah bahasa yang kita gunakan untuk
mengatur tampilan dan tata letak (visual) dari halaman web. Tanpa CSS, halaman
web hanya akan menjadi teks hitam-putih yang polos.
Ada tiga cara utama untuk menerapkan aturan CSS ke dokumen HTML Anda. Memahami perbedaan, kelebihan, dan kekurangannya sangat penting untuk menjadi developer web yang efisien.
Inline CSS (Langsung di Tag HTML)
Inline
CSS adalah metode menerapkan gaya langsung di dalam tag HTML
menggunakan atribut style
- Cara Kerja: Anda
menambahkan atribut style="..." ke elemen HTML
yang ingin Anda ubah. Di dalam tanda kutip, Anda menulis properti dan
nilai CSS
- Kelebihan: Sangat cepat untuk pengujian atau perbaikan kecil, Gaya ini memiliki prioritas tertinggi dan akan mengalahkan gaya Internal maupun External (kecuali jika ada properti !important)
- Kekurangan: Sulit Dikelola, Bayangkan jika Anda memiliki 100 paragraf dan ingin mengubah warnanya; Anda harus mengedit 100 tag satu per satu, Mencampur Struktur dan Tampilan: Ini melanggar prinsip pemisahan (Separation of Concerns), di mana HTML harus fokus pada struktur dan CSS pada tampilan, Tidak Reusable: Gaya hanya berlaku untuk satu elemen tersebut.
Contoh Kode Inline CSS
Dalam contoh ini, <h1> akan berwarna biru dan paragraf <p> akan memiliki latar belakang
kuning.
<!DOCTYPE html><html><body><h1 style="color: blue; text-align: center;">Ini adalah Judul yang Biru dan Rata Tengah</h1><p style="background-color: yellow; font-size: 16px;">Paragraf ini memiliki latar belakang kuning dan ukuran font 16px.</p></body></html>
Hasilnya :
Internal CSS (di Dalam Head HTML)
Internal
CSS (atau Embedded CSS) adalah
metode di mana Anda menempatkan semua kode CSS di dalam tag <style> yang
diletakkan di dalam bagian <head> dokumen HTML.
- Cara Kerja: Anda mendefinisikan semua aturan CSS Anda di satu tempat (di dalam <head>), dan aturan tersebut akan berlaku untuk semua elemen yang cocok di halaman tersebut.
- Kelebihan dan Kekurangan: Internal CSS memiliki kelebihan khusus, yaitu ideal digunakan jika satu halaman spesifik di website Anda, seperti halaman "Kontak", memerlukan gaya yang sangat unik, karena aturannya mencakup satu halaman tersebut saja. Metode ini juga lebih rapi daripada Inline CSS karena memisahkan kode gaya dari body HTML, meskipun masih berada di file yang sama. Akan tetapikelemahan utamanya adalah tidak reusable; gaya ini hanya berlaku untuk satu file HTML tempat ia ditulis, sehingga jika Anda memiliki 10 halaman dengan gaya serupa, Anda terpaksa harus menyalin-tempel kode CSS yang sama di 10 file berbeda.
Contoh Kode Internal CSS
Perhatikan bagaimana tag <style> ditempatkan
di dalam <head>.
<!DOCTYPE html><html><head><title>Contoh Internal CSS</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}h1 {color: green;border-bottom: 2px solid green;}p {color: #333;line-height: 1.5;}</style></head><body><h1>Halo, ini Judul Halaman</h1><p>Paragraf ini akan mengikuti gaya yang didefinisikan di dalam tag style di atas.</p><p>Paragraf ini juga akan mengikuti gaya yang sama.</p></body></html>
Hasilnya :
External CSS
External
CSS adalah metode yang paling direkomendasikan dan
paling umum digunakan dalam pengembangan web profesional.
- Cara Kerja: Anda menulis semua kode CSS Anda di dalam file terpisah dengan ekstensi .css (contoh: style.css, main.css). Kemudian, Anda menghubungkan file CSS ini ke dokumen HTML Anda menggunakan tag <link> di dalam <head>.
- Kelebihan: Keunggulan utamanya adalah sangat
reusable, di mana satu file
style.cssdapat mengatur tampilan ratusan halaman HTML, yang juga membuatnya mudah dikelola; jika Anda ingin mengubah warna link di seluruh situs, Anda cukup mengedit satu baris di file tersebut. Metode ini juga menciptakan pemisahan yang bersih antara struktur konten (HTML) dan desain visual (CSS). Selain itu, ini sangat baik untuk performa (caching), karena browser pengunjung hanya perlu mengunduh file CSS satu kali; saat mereka pindah ke halaman lain, file tersebut sudah tersimpan (cache), membuat website memuat lebih cepat.
Contoh Kode External CSS
Anda akan memiliki dua file:
File 1: index.html
(Perhatikan tag <link> di dalam <head>)
<!DOCTYPE html><html><head><title>Contoh External CSS</title><link rel="stylesheet" href="style.css"></head><body><h1>Judul Ini Diatur oleh File CSS External</h1><p>Paragraf ini juga diatur oleh file CSS yang sama.</p><button class="tombol-biru">Klik Saya</button></body>
File 2: style.css
body {font-family: 'Segoe UI', Tahoma, sans-serif;background-color: #ffffff;}h1 {color: navy;text-align: center;}p {font-size: 18px;color: #666;}.tombol-biru {background-color: #007bff;color: white;padding: 10px 15px;border: none;border-radius: 5px;cursor: pointer;}.tombol-biru:hover {background-color: #0056b3;}body {font-family: 'Segoe UI', Tahoma, sans-serif;background-color: #ffffff;}h1 {color: navy;text-align: center;}p {font-size: 18px;color: #666;}.tombol-biru {background-color: #007bff;color: white;padding: 10px 15px;border: none;border-radius: 5px;cursor: pointer;}.tombol-biru:hover {background-color: #0056b3;}
Hasilnya:
Catatan Penting tentang Prioritas (Cascade):
CSS berarti Cascading (Bertingkat/Berjenjang).
Aturan dasarnya adalah:
Gaya Inline akan mengalahkan Gaya Internal, dan Gaya Internal akan mengalahkan Gaya External.
Jika Anda memiliki h1 { color: red; } di file style.css (External) tetapi Anda menulis <h1 style="color: blue;"> (Inline),
judul itu akan berwarna biru.
Kutipan Motivasi
"Menguasai CSS ibarat belajar melukis. Awalnya mungkin terasa kaku dengan semua aturan, tetapi setiap properti yang Anda pelajari adalah kuas baru. Teruslah berlatih, dan Anda akan segera bisa menciptakan kanvas digital yang indah."
Diskusi