Halo teman-teman semuanya, setelah kita belajar banyak tentang elemen-elemen HTML, sekarang saatnya kita mulai menyentuh bagian styling, yaitu CSS (Cascading Style Sheets).
Di artikel ini, kita akan belajar bagaimana cara menghubungkan HTML dengan CSS dan memberi tampilan yang lebih menarik pada halaman web kita.
Apa Itu CSS?
CSS adalah bahasa yang digunakan untuk mengatur tampilan dan layout dari elemen-elemen HTML. Dengan CSS, kita bisa mengatur warna, ukuran, jarak, posisi, dan banyak hal lainnya agar halaman web kita jadi lebih enak dilihat.
1. Cara Menghubungkan CSS ke HTML
Ada 3 cara utama untuk menggunakan CSS dalam HTML:
-
Inline CSS (langsung di tag HTML)
CSS ditulis langsung di dalam atribut style pada elemen HTML.
<p style="color: blue; font-size: 18px;">Teks ini berwarna biru dan ukurannya 18px.</p>
Cocok untuk styling cepat, tapi kurang rapi kalau dipakai banyak.
-
Internal CSS (di dalam <style> di <head>)
CSS ditulis di bagian <head> halaman HTML.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: darkgreen;
text-align: center;
}
</style>
</head>
<body>
<h1>Selamat Datang!</h1>
</body>
</html>
Cocok untuk halaman kecil atau demo.
-
External CSS (file CSS terpisah)
Cara terbaik dan paling direkomendasikan. Kita buat file CSS sendiri (misalnya style.css) lalu hubungkan ke HTML menggunakan tag <link>.
-
HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
-
style.css:
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
Cara ini paling rapi dan mudah dikelola dalam proyek besar.
2. Contoh Dasar Styling CSS
/* File: style.css */
p {
color: gray;
font-size: 16px;
}
a {
color: red;
text-decoration: none;
}
Efek:
- Semua
<p> akan berwarna abu-abu dan ukurannya 16px.
- Semua
<a> (link) akan berwarna merah tanpa garis bawah.
3. Selector Dasar dalam CSS
tag - memilih elemen berdasarkan nama tag: h1, p, a.class - memilih elemen berdasarkan class: .menu#id - memilih elemen berdasarkan id: #header
Contoh penggunaan class dan id di HTML:
<div id="header" class="hero-section">
<h1>Judul Website</h1>
</div>
Kesimpulan
Di artikel ini, kita sudah belajar dasar cara menghubungkan HTML dengan CSS, baik itu lewat inline, internal, maupun external.
Pada artikel berikutnya, kita semua akan belajar mengintegrasikan JavaScript di dalam HTML, biar tampilannya bisa interaktif.
Terima Kasih