Cara Menghubungkan CSS ke HTML (Inline, Internal, dan External CSS)
Dalam pembuatan website, salah satu langkah penting adalah menghubungkan CSS ke HTML agar tampilan halaman menjadi menarik dan profesional. CSS (Cascading Style Sheets) berfungsi untuk mengatur tampilan elemen-elemen HTML seperti warna, ukuran font, layout, hingga jarak antar elemen.
Artikel ini akan membahas secara lengkap cara menghubungkan CSS ke HTML melalui tiga metode utama: inline CSS, internal CSS, dan external CSS. Kita juga akan melihat contoh penerapan CSS pada HTML serta memahami perbedaan antara ketiganya.
Daftar isi
Baca juga: Belajar CSS dari Nol: Pengertian, Fungsi, dan Cara Kerja CSS
1. Cara Menghubungkan CSS Inline ke HTML
CSS Inline adalah cara paling sederhana untuk menambahkan style langsung pada elemen HTML menggunakan atribut style.
Metode ini cocok untuk pengujian cepat atau mengubah tampilan satu elemen saja.
Contoh kode CSS inline:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Inline</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Halo, ini contoh CSS Inline</h1>
<p style="font-size: 18px; color: gray;">Teks ini menggunakan CSS inline.</p>
</body>
</html>Code language: HTML, XML (xml)Pada contoh di atas, atribut style ditulis langsung di dalam tag HTML.
Setiap properti CSS dipisahkan oleh titik koma (;).
Kelebihan CSS Inline:
- Mudah digunakan untuk elemen tunggal.
- Tidak membutuhkan file tambahan.
Kekurangan CSS Inline:
- Sulit dikelola jika banyak elemen yang perlu diubah.
- Tidak efisien untuk proyek besar.
3. Cara Menghubungkan CSS External ke HTML
Metode paling efisien dan profesional adalah menggunakan CSS External.
CSS ditulis dalam file terpisah dengan ekstensi .css, lalu dihubungkan ke file HTML menggunakan tag <link> di dalam bagian <head>.
Langkah-langkah menghubungkan CSS eksternal ke HTML:
- Buat file HTML (misalnya
index.html). - Buat file CSS (misalnya
style.css). - Hubungkan file CSS ke HTML dengan tag
<link>.
Contoh kode:
File style.css:
body {
background-color: #ffffff;
font-family: 'Roboto', sans-serif;
}
h1 {
color: #e74c3c;
text-align: center;
}
p {
color: #333;
font-size: 16px;
}Code language: CSS (css)File index.html:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Eksternal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Belajar CSS Eksternal</h1>
<p>Contoh menghubungkan CSS eksternal ke HTML.</p>
</body>
</html>Code language: HTML, XML (xml)Kelebihan CSS Eksternal:
- File CSS dapat digunakan di banyak halaman.
- Struktur HTML menjadi lebih bersih.
- Lebih mudah dikelola dan dioptimalkan.
Kekurangan CSS Eksternal:
- Memerlukan file tambahan.
- Membutuhkan koneksi untuk memuat file eksternal saat halaman dibuka.
5. Contoh Penerapan CSS pada HTML
Berikut contoh sederhana penerapan struktur HTML dan CSS eksternal:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penerapan CSS pada HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Belajar HTML dan CSS untuk Pemula</h1>
</header>
<main>
<p>Dengan memahami cara menghubungkan CSS ke HTML, kamu bisa membuat tampilan website menjadi lebih menarik.</p>
</main>
</body>
</html>Code language: HTML, XML (xml)6. Kesimpulan
Menghubungkan CSS ke HTML dapat dilakukan dengan tiga cara utama: Inline, Internal, dan External CSS.
Untuk proyek kecil, inline CSS mungkin cukup. Namun untuk website profesional, CSS eksternal lebih disarankan karena membuat kode lebih rapi, efisien, dan mudah dirawat.
Dengan memahami cara menambahkan CSS ke HTML dan perbedaan antar metode, kamu sudah berada di jalur yang tepat untuk menguasai tutorial CSS HTML untuk pemula.
Langkah selanjutnya adalah terus berlatih membuat layout dan eksperimen dengan berbagai properti CSS.
