Kalau lo baru mulai belajar bikin website, pasti udah kenal sama yang namanya HTML — bahasa dasar buat ngebentuk struktur halaman. Tapi… tampilan HTML polos aja tuh kayak nasi tanpa lauk. Di sinilah CSS (Cascading Style Sheets) berperan.
CSS dipakai buat ngasih gaya ke elemen-elemen HTML: warna, ukuran, jarak, posisi, font, bahkan animasi. Dengan CSS, halaman web lo bisa berubah dari “biasa aja” jadi “keren banget”.
🎨 Apa Itu CSS?
CSS adalah bahasa desain yang digunakan untuk mengatur tampilan dokumen HTML.
Bayangin HTML itu kerangka rumah, dan CSS itu cat, dekorasi, dan pencahayaannya.
Contohnya begini:
<h1>Halo Dunia!</h1>
Tanpa CSS, teks di atas cuma muncul hitam polos di layar putih. Tapi kalau dikasih CSS:
h1 {
color: #3498db;
font-family: 'Poppins', sans-serif;
text-align: center;
}
Sekarang judulnya tampil lebih hidup dan enak dilihat.
🧱 Cara Menambahkan CSS ke Halaman HTML
Ada tiga cara buat masukin CSS ke halaman web:
- Inline CSS
Ditulis langsung di elemen HTML.<p style="color: red;">Teks ini berwarna merah.</p> - Internal CSS
Ditaruh di tag<style>di dalam file HTML.<style> body { background-color: #f5f5f5; } </style> - External CSS
Disimpan di file.cssterpisah dan dihubungkan lewat tag<link>.<link rel="stylesheet" href="style.css">
Cara ketiga ini paling direkomendasikan, karena bikin kode lebih rapi dan gampang diatur.
✨ Hal-Hal Seru yang Bisa Lo Lakuin dengan CSS
- Ngebuat animasi dan transisi biar elemen terlihat hidup.
- Mengatur layout responsif pakai Flexbox dan Grid.
- Menyesuaikan tampilan mobile dan desktop dengan media queries.
- Nambahin efek hover, shadow, dan gradient yang bikin desain makin estetik.
💡 Tips Buat Pemula
- Gunakan developer tools (F12 di browser) buat eksperimen gaya langsung.
- Pelajari konsep box model (margin, border, padding, content).
- Jangan takut coba warna, font, dan layout baru — tapi tetap jaga konsistensi desain.
🚀 Kesimpulan
CSS bukan cuma tentang warna dan font. Ini tentang gimana lo ngasih karakter ke website lo.
Dengan CSS, lo bisa bikin pengalaman pengguna jadi lebih menarik dan profesional.
Kalau lo baru mulai, coba ubah satu elemen kecil dulu — warna tombol, font, atau background. Dari situ, lo bakal makin paham gimana CSS bekerja.