Section ini menyusun materi secara bertahap: kerjakan Chapter dari urutan teratas agar setiap konsep baru selalu berpijak pada konsep sebelumnya. Setiap Chapter menyertakan contoh kode yang telah diuji dan dapat Anda ikuti langsung di editor.

# Peran HTML dan CSS

Pahami pembagian tugas HTML dan CSS, alasan keduanya dipisah, dan konsep cascade dalam bekal CSS minimum.

Buka → # Menghubungkan File CSS

Hubungkan file CSS dengan elemen link rel stylesheet, atur path relatif, dan manfaatkan caching.

Buka → # Internal dan Inline CSS

Kenali tiga cara menyisipkan CSS: file eksternal, internal style, dan inline style beserta waktu tepatnya.

Buka → # Selector Dasar

Gunakan selector element, class, ID, descendant, dan pseudo-class untuk menyasar elemen secara presisi.

Buka → # Warna dan Background

Atur warna teks dan latar dengan hex, rgb(), hsl(), background-image, serta jaga kontras teks WCAG.

Buka → # Font dan Text

Atur jenis huruf dengan font-family, ukuran px dan rem, font-weight, line-height, hingga perataan teks.

Buka → # Margin dan Padding

Pahami box model: margin mengatur jarak luar elemen dan padding mengatur jarak dalam, lengkap dengan shorthand.

Buka → # Border dan Border Radius

Berikan garis tepi dan sudut membulat pada elemen dengan border dan border-radius, dari kartu hingga avatar bulat.

Buka → # Width dan Height

Atur lebar dan tinggi elemen dengan width, height, max-width, dan box-sizing agar tata letak tetap terkendali.

Buka → # Display Dasar

Kenali perilaku block, inline, inline-block, dan none, lalu ubah tata letak elemen HTML menggunakan properti display.

Buka → # Class dan ID untuk Styling

Gunakan class dan id dengan tepat: pola berulang, variasi class, konvensi penamaan, dan target unik dalam dokumen.

Buka → # Kapan Belajar CSS Lebih Dalam

Kenali tanda siap memperdalam CSS, peta topik lanjutan, rute belajar yang dianjurkan, dan jembatan menuju JavaScript.

Buka →