🎨 Phase 2 — CSS
P08 · Pertemuan 8 dari 20
Pengenalan CSS & Selector
Mengenal CSS, cara menghubungkan stylesheet, dan menguasai berbagai jenis selector dari dasar hingga kombinasi dan pseudo-selector.
Tujuan Pembelajaran
- 01Menghubungkan CSS ke HTML: inline, internal, external
- 02Menggunakan selector: element, class (.), id (#)
- 03Menerapkan selector kombinasi: descendant, child (>), sibling (+, ~)
- 04Menggunakan pseudo-selector: :first-child, :last-child, :nth-child(n)
- 05Memahami specificity dan cascade
- 06Mengenal inheritance CSS
Sub-topik & Materi
- 01Cara menghubungkan CSS: inline, internal, external (rekomendasi)
- 02Selector dasar: element, class (.), id (#)
- 03Selector kombinasi: descendant, child (>), adjacent sibling (+), general sibling (~)
- 04Pseudo-class: :first-child, :last-child, :nth-child(n), :hover, :focus
- 05Specificity: ID > Class > Element
- 06Cascade dan inheritance
Penjelasan Konsep
Konsep 1
Tiga Cara Menulis CSS
CSS bisa ditulis 3 cara: Inline (langsung di atribut style tag HTML — hindari), Internal (di dalam tag <style> di <head> — untuk halaman tunggal), External (di file .css terpisah yang di-link — TERBAIK karena satu file CSS bisa dipakai banyak halaman). Selalu gunakan external CSS untuk project nyata.
html
<!-- 1. Inline: hindari ini --> <p style="color: red; font-size: 16px;">Teks merah</p> <!-- 2. Internal: di dalam <head> --> <style> p { color: blue; } </style> <!-- 3. External: file terpisah (TERBAIK) --> <link rel="stylesheet" href="style.css">
Konsep 2
Selector CSS: Element, Class, ID
Selector menentukan elemen HTML mana yang akan di-styling. Element selector (p, h1) berlaku untuk SEMUA elemen tersebut. Class selector (.nama-kelas) bisa dipakai berkali-kali di banyak elemen. ID selector (#nama-id) hanya untuk SATU elemen unik per halaman. Kombinasikan untuk hasil yang lebih spesifik.
css
/* Element selector */ p { color: gray; } /* Class selector (didahului titik) */ .tombol { background: blue; color: white; } /* ID selector (didahului #) */ #header { background: black; } /* Kombinasi: <;p class="penting"> */ p.penting { font-weight: bold; } /* Descendant: <;div><p>...</p></div> */ div p { margin: 0; }
Konsep 3
Specificity — Prioritas CSS
Ketika beberapa aturan CSS berlaku pada elemen yang sama, specificity menentukan mana yang menang. ID paling kuat, lalu class, lalu element. Hitung dengan format (ID, Class, Element): h1 = (0,0,1), .judul = (0,1,0), #header = (1,0,0). Yang lebih tinggi selalu menang.
css
/* (0,0,1) — paling lemah */ p { color: black; } /* (0,1,0) — lebih kuat */ .teks { color: blue; } /* (1,0,0) — paling kuat */ #konten { color: red; } /* Elemen dengan semua class di atas: */ /* <p class="teks" id="konten"> */ /* Warna akhir = red (ID menang) */
Konsep 4
Pseudo-class dan Pseudo-element
Pseudo-class (:hover, :focus, :first-child) memilih elemen berdasarkan STATE atau POSISI. Pseudo-element (::before, ::after, ::first-line) memilih BAGIAN dari elemen. Notasi pseudo-class satu titik dua (:hover), pseudo-element dua titik dua (::before).
css
/* Pseudo-class: state */ a: hover { color: orange; } input: focus { border-color: blue; outline: none; } li: first-child { font-weight: bold; } li: nth-child(2n) { background: #f0f0f0; } /* baris genap */ /* Pseudo-element: bagian elemen */ p: :first-line { font-variant: small-caps; } .card: :before { content: "★ "; color: gold; }
Contoh Kode Lengkap
css
/* === Selector Dasar === */ h1 { color: #1A4A8A; } /* Element selector */ .kartu { padding: 20px; } /* Class selector */ #header { background: #fff; } /* ID selector */ /* === Selector Kombinasi === */ nav a { text-decoration: none; } /* Descendant */ ul > li { color: #333; } /* Direct child */ h1 + p { margin-top: 0; } /* Adjacent sibling */ h2 ~ p { color: gray; } /* General sibling */ /* === Pseudo-class === */ li: first-child { font-weight: bold; } li: last-child { border-bottom: none; } li: nth-child(2n) { background: #f5f5f5; } /* === Pseudo-class Interaktif === */ a: hover { color: #F4A300; } input: focus { border-color: #1A4A8A; outline: none; }
Latihan Kelas · Berikan warna latar, warna teks, dan ukuran font pada elemen-elemen halaman profil
1
Buat file style.css dan hubungkan ke halaman Mini Project P06
2
Styling elemen dasar: body, h1, h2, p, a menggunakan element selector
3
Tambahkan class pada beberapa elemen dan styling dengan class selector
4
Buat efek hover pada semua link navigasi
5
Gunakan :nth-child untuk warna zebra pada list atau tabel
Kesalahan yang Sering Dibuat
Salah selector: menulis .#nama (gabungan titik dan #) — class pakai titik, ID pakai #
Lupa titik koma (;) setelah setiap properti — CSS akan gagal dari titik koma yang hilang
Salah tulis nama properti: "font-colour" harusnya "color", "backround" harusnya "background"
Conflict specificity: class tidak bisa override ID tanpa !important — desain ulang selector
Tidak menyambungkan file CSS: lupa tag <link rel="stylesheet" href="style.css"> di HTML