Panduan & Referensi
Kasus penggunaan dunia nyata untuk membantu Anda memulai dengan CSS Styling.
Panduan
Apa Itu CSS?
Selamat datang di dunia CSS! Pahami apa itu Cascading Style Sheets, peran krusialnya dalam web development, dan kenapa ini adalah langkah wajib setelah HTML.
Panduan
Sintaks Dasar CSS
Yuk, belajar 'bahasa' CSS! Pahami komponen utama aturan CSS: selector untuk memilih elemen HTML, property untuk menentukan aspek gaya, dan value untuk nilainya.
Panduan
Menambahkan CSS ke HTML
Pelajari tiga metode untuk menerapkan style CSS ke HTML: External CSS (paling direkomendasikan), Internal CSS, dan Inline CSS. Pahami kapan menggunakan masing-masing.
Panduan
Selector Dasar CSS
Belajar cara paling fundamental memilih elemen HTML untuk diberi style menggunakan Type Selector, Class Selector, dan ID Selector di CSS.
Panduan
Selector Kombinasi & Grup CSS
Buat seleksimu lebih presisi! Pelajari cara menggunakan Descendant, Child, Adjacent Sibling, General Sibling, dan Grouping selector di CSS.
Panduan
Selector Atribut & Pseudo CSS
Kuasai teknik seleksi elemen tingkat lanjut di CSS! Pelajari cara menggunakan selector berdasarkan atribut, state elemen (pseudo-class), dan bagian spesifik elemen (pseudo-element).
Panduan
Warna, Background, & Gradient CSS
Pelajari cara mengubah warna teks, warna latar belakang, menggunakan gambar sebagai background, dan menciptakan efek gradient yang menawan dengan CSS.
Panduan
Tipografi CSS
Bikin teks di websitemu enak dibaca dan sesuai desain! Pelajari cara mengontrol jenis font, ukuran, ketebalan, gaya, perataan, dan spasi teks dengan CSS.
Panduan
Box Model CSS
Bongkar rahasia di balik ukuran dan spasi elemen HTML! Pelajari konsep fundamental Box Model CSS yang terdiri dari content, padding, border, dan margin.
Panduan
Shadow & Outline CSS
Bikin elemenmu makin 'pop out'! Pelajari cara menambahkan efek bayangan pada kotak (box-shadow) dan teks (text-shadow), serta menggunakan outline untuk penegasan.
Panduan
Display, Visibility, Opacity CSS
Pelajari cara mengatur bagaimana elemen HTML ditampilkan (block, inline, none), cara menyembunyikannya, dan cara membuat elemen jadi transparan dengan properti CSS.
Panduan
Transformasi CSS
Bikin elemenmu bergerak, berputar, berubah ukuran, atau miring! Pelajari properti `transform` CSS dan fungsi-fungsinya seperti `translate`, `scale`, `rotate`, dan `skew`.
Panduan
Positioning CSS
Kuasai penempatan elemen di halaman web! Pelajari berbagai nilai properti `position` CSS (static, relative, absolute, fixed, sticky) dan cara kerjanya.
Panduan
CSS Flexbox
Ucapkan selamat tinggal pada float dan trik layout kuno! Pelajari CSS Flexbox, cara modern dan powerful untuk mengatur tata letak item dalam satu dimensi (baris atau kolom).
Panduan
CSS Grid Layout
Naik level dari Flexbox! Pelajari CSS Grid Layout untuk menciptakan tata letak halaman web yang kompleks dan responsif dengan kontrol penuh atas baris dan kolom.
Panduan
Desain Responsif & Media Queries
Pastikan websitemu tampil sempurna di semua perangkat! Pelajari konsep Desain Web Responsif (RWD) dan cara menggunakan Media Queries CSS untuk mengatur style berdasarkan ukuran layar, termasuk pengenalan dark/light mode.
Panduan
Unit & Nilai CSS
Lebih dari sekadar pixel! Kenali berbagai jenis unit ukuran (absolut & relatif), format nilai warna, cara menggunakan URL, dan fungsi-fungsi CSS seperti calc() dan var().
Panduan
Spesifisitas, Inheritance, Cascade CSS
Kenapa style CSS-ku gak ngefek? Pelajari bagaimana browser menentukan style mana yang akan diterapkan jika ada konflik, melalui konsep The Cascade, Spesifisitas Selector, dan Inheritance (Pewarisan).
Panduan
Praktik Terbaik & Framework CSS
Naikkan level skill CSS-mu! Pelajari praktik terbaik untuk menulis kode CSS yang mudah di-maintain, plus kenalan singkat dengan konsep CSS Framework seperti Tailwind CSS.
Panduan
Transisi CSS
Bikin perubahan style di websitemu jadi lebih smooth! Pelajari cara menggunakan properti `transition` CSS untuk menganimasikan perubahan nilai properti secara bertahap.
Panduan
Animasi CSS (Keyframes)
Lebih dari sekadar transisi! Pelajari cara membuat animasi yang lebih kompleks dan terkontrol di CSS menggunakan aturan `@keyframes` dan berbagai properti `animation-*`.
Panduan
Penutup CSS & Lanjutan
Kamu berhasil! Rangkuman perjalanan belajar CSS, motivasi untuk terus praktik, dan arahan ke dunia JavaScript atau topik CSS lanjutan seperti Preprocessor dan Framework.
Panduan
Cheat Sheet Tabel CSS
Navigasi cepat ke materi CSS! Tabel referensi properti CSS dasar, selector, konsep layout, dan link ke penjelasan detailnya.
Panduan
Contoh Akhir: Kartu Profil CSS
Lihat bagaimana semua konsep CSS beraksi! Studi kasus lengkap membuat halaman profil menarik mirip Linktree, lengkap dengan daftar link dan video YouTube responsif.