CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan (desain) dari halaman web.
Kalau sebelumnya HTML itu kerangka rumah, maka:
- HTML = rangka bangunan (struktur)
- CSS = cat, wallpaper, desain interior (tampilan)
- JavaScript = pintu otomatis, lampu pintar (interaksi)
Tanpa CSS, semua halaman web hanya akan terlihat polos (hanya teks hitam putih).
🔹 Kenapa disebut Cascading Style Sheets?
- Cascading → Artinya gaya (style) bisa turun-menurun / diwariskan dari elemen induk ke anak.
Misalnya, kalau body dikasih warna teks biru, maka semua teks di dalamnya ikut biru (kecuali diubah lagi). - Style → CSS dipakai untuk memberikan gaya pada HTML (warna, font, ukuran, dll.).
- Sheets → Disebut lembaran gaya, karena bisa ditulis di file terpisah (
style.css) lalu dipanggil ke HTML.
🔹 Fungsi CSS
Dengan CSS kita bisa:
✅ Mengatur warna teks, background, dan border.
✅ Mengubah ukuran font, jenis huruf, dan tata letak.
✅ Membuat tampilan lebih modern dengan shadow, gradient, animasi.
✅ Membuat website responsif (bisa menyesuaikan tampilan di HP, tablet, laptop).
🔹 Struktur CSS
CSS biasanya ditulis seperti ini:
selector {
property: value;
}
Contoh:
p {
color: blue;
font-size: 18px;
}
👉 Artinya: semua <p> (paragraf) akan berwarna biru dan ukuran font 18px.
🔹 Cara Menulis CSS
Ada 3 cara menambahkan CSS ke HTML:
- Inline CSS (langsung di elemen HTML)
<p style="color:red;">Teks ini merah</p> - Internal CSS (ditulis di dalam
<style>di file HTML)<style> p { color: green; } </style> - External CSS (file terpisah
.css)<link rel="stylesheet" href="style.css">→ Cara ini paling rapi dan sering digunakan.
🔹 Contoh Sederhana HTML + CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah teks paragraf yang sudah diatur dengan CSS.</p>
</body>
</html>
📌 Hasilnya:
- Background abu-abu muda
- Judul warna biru dan di tengah
- Paragraf dengan teks abu gelap, ukuran lebih besar
🔹 Analogi Sederhana
Bayangkan kamu bikin majalah:
- HTML = naskah artikel (isi teks dan gambar).
- CSS = desain layout (warna, font, tata letak kolom).
- JavaScript = efek interaktif (form pembaca, tombol share).
👉 Jadi, CSS adalah alat untuk mempercantik tampilan website agar tidak membosankan dan lebih profesional.