Belajar CSS untuk Pemula: Panduan Lengkap
CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa desain yang digunakan untuk mengatur tampilan halaman web, seperti warna, ukuran, font, dan layout.
🎨 Apa Fungsi CSS?
- Mengubah warna dan jenis huruf pada halaman
- Mengatur tata letak elemen seperti margin, padding, dan posisi
- Membuat tampilan web lebih menarik dan responsif
📌 3 Cara Menyisipkan CSS
- Inline CSS — langsung dalam tag HTML
- Internal CSS — di dalam tag
<style> - External CSS — di file terpisah berekstensi
.css
🧪 Contoh Inline CSS:
<p style="color: red;">Teks ini berwarna merah.</p>
🧪 Contoh Internal CSS:
<style>
p {
color: blue;
font-size: 18px;
}
</style>
🧪 Contoh External CSS:
<link rel="stylesheet" href="style.css">
💡 Contoh Praktis CSS Internal
🎯 Properti CSS yang Sering Digunakan
| Properti | Fungsi | Contoh |
|---|---|---|
color |
Warna teks | color: red; |
background-color |
Warna latar | background-color: yellow; |
font-size |
Ukuran huruf | font-size: 20px; |
padding |
Ruang dalam elemen | padding: 10px; |
margin |
Ruang luar elemen | margin: 20px; |
🧪 Latihan Interaktif
Gantilah warna dan ukuran teks sesuai keinginan kamu:
📝 Tugas Praktik Mandiri
- Buat file HTML bernama
belajar-css.html - Tambahkan internal CSS untuk mengubah warna background dan teks
- Ubah tampilan elemen
<h1>,<p>, dan<a> - Gunakan minimal 3 properti CSS yang berbeda
- Simpan dan lihat hasilnya di browser
Bonus: Tambahkan hover effect pada link menggunakan :hover!