FluentStack

Selector dan Declaration Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner35 menitBahasa Indonesia

Selector dan Declaration Dasar

Pelajari cara membaca aturan CSS melalui selector, property, dan value.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami selector sebagai target elemen HTML
  • Memahami property dan value dalam declaration
  • Membaca declaration block sederhana
CSSSelectorsStyling

Isi lesson

7 blok
  1. 1.
    Cara membaca aturan CSSBelum selesaiWajib
  2. 2.
    Contoh selector, property, dan valueBelum selesaiWajib
  3. 3.
    Tiga selector awalBelum selesaiWajib
  4. 4.
    Jangan lupa titik untuk class selectorBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Cara membaca aturan CSS

Wajib

Aturan CSS punya pola dasar: selector memilih target, lalu declaration block berisi aturan tampilan. Di dalam declaration block, property menentukan bagian tampilan yang diatur, dan value menentukan nilainya. Satu declaration adalah pasangan property dan value.

Bagian ini memengaruhi progres lesson.

Contoh selector, property, dan value

Wajib
css
.card {
  background: #18181b;
  padding: 16px;
  border-radius: 12px;
}

.card memilih elemen dengan class="card". background mengatur warna latar, padding mengatur ruang bagian dalam, dan border-radius membulatkan sudut. Nilai seperti #18181b, 16px, dan 12px adalah value.

Bagian ini memengaruhi progres lesson.

Tiga selector awal

Wajib

Element selector menargetkan nama elemen, misalnya p. Class selector menargetkan class dan memakai titik, misalnya .card. ID selector menargetkan id dan memakai pagar, misalnya #main-title. Untuk sekarang, cukup kenali bentuknya dan kapan kamu sedang menargetkan element, class, atau id.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan lupa titik untuk class selector

.card menargetkan elemen dengan class="card". Jika kamu menulis card tanpa titik, CSS akan mencari elemen bernama <card>, bukan class card yang biasanya kamu maksud.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Selector mana yang menargetkan elemen dengan class="card"?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Latihan selector, property, dan value

Latihan membaca dan menulis declaration block dengan selector sederhana.

Tujuan awal: Targetkan elemen dengan class card memakai .card.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis6 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Selector memilih target.
  • Property menentukan apa yang diatur.
  • Value menentukan nilainya.
  • Class selector memakai titik.
  • Berikutnya, kamu akan melihat kenapa kadang satu aturan CSS menang dari aturan lain.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Cara membaca aturan CSS.

Memuat progresReview module