Apa itu CSS dan Cara Kerjanya
Jika HTML adalah pondasi dan batu bata penyusun sebuah rumah, maka CSS
adalah cat, jendela, karpet, dekorasi, dan desain interiornya.
Tanpa CSS, semua website di internet hanya akan berupa teks hitam-putih yang panjang ke bawah. Di bab
pertama modul CSS ini, kita akan berkenalan dengan apa itu CSS dan 3 cara menambahkannya ke dalam project
web kamu.
🎨 Kepanjangan CSS
CSS singkatan dari Cascading Style Sheets.
Cascading
Air Terjun. Gaya/aturan akan mengalir dari atas ke bawah. Aturan yang paling bawah akan menimpa (override) aturan yang di atasnya jika elemennya sama.
Style
Gaya visual. Di sinilah kita mendefinisikan warna, ukuran font, jarak, bayangan, layout 2 kolom/3 kolom, dll.
Sheets
Lembaran dokumen. Umumnya CSS dipisahkan ke dalam lembaran (file) `.css` yang terpisah dari HTML.
🧩 Anatomi Kode CSS
Bahasa CSS sangat sederhana. Terdiri dari Selector (siapa yang mau dihias) dan Declaration block (hiasannya seperti apa).
h1 {
color: #ff0000;
font-size: 24px;
}- Selector: Mengarah ke elemen HTML mana yang ingin diubah. Di contoh atas, kita menargetkan
semua tag
<h1>. - Properti: Sifat apa yang mau diubah (warna, ukuran, jarak).
- Nilai: Value ukurannya. Pisahkan dengan tanda titik dua
:dan wajib ditutup dengan titik koma;.
📥 3 Cara Menggabungkan CSS dengan HTML
Bagaimana cara browser tahu kalau ada kode CSS yang harus diterapkan ke file HTML? Ada 3 tempat penulisan CSS.
Inline CSS (Tag Style attribute)
Menulis langsung di dalam tag pembuka HTML menggunakan atribut `style=""`.
⚠️ Tidak Disarankan (Kecuali untuk Testing)
karena bikin kode berantakan.
<h1 style="color: blue; text-align: center;">Ini Judul Biru</h1>Internal CSS (Tag <style>)
Ditulis di dalam tag <style> yang biasanya diletakkan berbarengan di atas
elemen <head> halaman HTML tersebut.
<head>
<style>
body { background-color: #f4f4f4; }
h1 { color: blue; }
</style>
</head>External CSS (File .css Terpisah) 🌟 Best Practice
Membuat file khusus (misal: style.css) lalu menghubungkannya ke semua file HTML dengan
bantuan tag `
`. Ini cara paling efektif karena 1 file CSS bisa mendesain ulang 100 halaman HTML sekaligus.
📄 index.html
<head>
<!-- Menghubungkan ke file css -->
<link rel="stylesheet" href="style.css">
</head>📄 style.css
h1 {
color: blue;
}👀 Kekuatan CSS (Melihat Perbedaannya)
Coba klik tombol di bawah ini untuk melihat betapa drastisnya perbedaan sebuah website sebelum dan sesudah menggunakan CSS.
Budi Developer
Membangun impian lewat baris kode.
- HTML 100%
- CSS Sedang Belajar