Belajar CSS
CSS mengatur tampilan halaman web: warna, ukuran, jarak, dan tata letak. Hampir semua masalah CSS bermuara ke tiga hal: box model, cara elemen ditampilkan, dan cara elemen diatur posisinya.
Mulailah dari box model (content, padding, border, margin), lalu display dan position. Setelah itu Flexbox dan Grid untuk layout, dan media query supaya halamanmu enak dilihat di HP.
Tiap properti dibahas dengan contoh dan playground: geser nilainya, lihat hasilnya langsung, lalu salin CSS-nya.
Latihan CSS interaktif ada di Hyper Sheets: materi, kuis, dan game per konsep, gratis.
Mulai dari sini
-
CSS · 11 menitBox Model CSS Adalah: Content, Padding, Border, dan Margin (Panduan Lengkap)
Box model CSS adalah konsep setiap elemen digambar sebagai kotak berlapis: content, padding, border, margin. Pelajari cara kerjanya dan box-sizing border-box.
-
CSS · 9 menitDisplay CSS Adalah: Perbedaan Block, Inline, Inline-Block, Flex, dan Grid
Display CSS adalah properti yang menentukan cara elemen tampil dan menyusun diri di halaman. Pahami beda block, inline, inline-block, none, flex, dan grid.
-
CSS · 19 menitMemahami CSS Flexbox, Panduan Lengkap dengan Demo Interaktif
Flexbox adalah sistem layout satu dimensi di CSS. Panduan lengkap untuk pemula: flex-direction, justify-content vs align-items, cara centering div, mini-proyek layout halaman, kesalahan umum, dan FAQ, plus demo interaktif.
-
CSS · 12 menitMedia Query Adalah: Cara Membuat Website Responsive di CSS (Panduan Pemula)
Media query adalah aturan CSS yang mengubah tampilan berdasarkan lebar layar. Pelajari sintaks @media, breakpoint, mobile-first, dan cara membuat website responsive.
Semua artikel CSS lainnya
-
CSS · 10 menitBox Shadow CSS Adalah: Cara Membuat Efek Bayangan (Lengkap + Playground)
Box-shadow adalah properti CSS untuk membuat bayangan pada elemen. Pelajari arti kelima nilainya (offset-x, offset-y, blur, spread, color), inset, multiple shadow, dan cara pakainya lewat playground interaktif.
-
CSS · 9 menitCara Membuat Gradasi Warna dengan linear-gradient CSS (Lengkap + Playground)
Cara membuat gradasi warna di CSS pakai linear-gradient: atur arah (to right, 45deg), color stop dengan posisi, transparansi rgba. Plus beda linear vs radial vs conic dan playground interaktif.
-
CSS · 9 menitCSS Transition Adalah: Cara Kerja, 4 Sub-Properti, dan Timing Function
CSS transition adalah animasi halus antara dua state elemen. Pelajari transition-property, duration, timing-function, delay, shorthand, dan bedanya dengan animation.
-
CSS · 9 menitPseudo-class CSS Adalah: :hover, :focus, :active, dan :nth-child untuk Pemula
Pseudo-class adalah kata kunci yang memilih elemen berdasarkan state atau posisinya. Pelajari :hover, :focus, :active, dan :nth-child lengkap dengan contoh interaktif.
-
CSS · 10 menitCSS Variables Adalah: Custom Properties untuk Tema & Kode Rapi (Panduan Pemula)
CSS Variables (custom properties) adalah cara menyimpan nilai sekali lalu memakainya di banyak tempat. Pelajari sintaks --nama, var(), :root, tema dark mode, plus bedanya dengan variabel SASS.
-
CSS · 11 menitPerbedaan id dan class di CSS: Kapan Pakai # dan Kapan Pakai .
Perbedaan id dan class di CSS: id (#) unik dan hanya sekali per halaman, class (.) bisa dipakai berkali-kali. Pelajari specificity dan kapan memakai keduanya.
-
CSS · 13 menitPosition CSS: Perbedaan Static, Relative, Absolute, Fixed, dan Sticky
Position CSS menentukan cara elemen ditempatkan. Pahami perbedaan absolute dan relative, cara kerja position sticky, fixed, dan dasar CSS positioning.
-
CSS · 13 menitMargin Adalah: Pengertian, Fungsi, dan Bedanya dengan Padding di CSS
Margin adalah jarak di luar elemen, antara border dan elemen tetangga. Pelajari perbedaan margin dan padding, margin auto untuk centering, margin collapse, dan margin negatif.
-
CSS · 21 menitBackground Transparan, Gradasi, dan Dark Mode di CSS
Cara membuat background transparan dengan rgba, gradasi linear-gradient, dan dark mode. Plus beda background vs background-color dan kontras yang aman dibaca.
-
CSS · 20 menitBorder CSS Adalah: Fungsi, Jenis-Jenis, dan Cara Mengatur Warna Border
Border artinya garis tepi atau bingkai. Pelajari fungsi border di CSS, semua jenis border-style, dan cara mengatur warna border lewat border-color.
-
CSS · 16 menitBorder Radius CSS: Cara Membuat Sudut Melengkung (+ Rounded di Tailwind)
border-radius adalah properti CSS untuk melengkungkan sudut elemen. Resep lengkap: tombol pill, avatar lingkaran, % vs px, cheatsheet rounded Tailwind.
-
CSS · 19 menitZ-Index CSS Adalah: Cara Mengatur Tumpukan Elemen (+ Cheatsheet Z-Index di Tailwind)
Z-index adalah properti CSS pengatur urutan tumpukan elemen yang saling menimpa. Bahas syaratnya, stacking context, plus cheatsheet z-index di Tailwind.
-
CSS · 18 menitUrutan Fungsi Transform CSS dan Kenapa Hasilnya Berbeda
Urutan translate, rotate, dan scale mengubah hasil transform. Pahami transform-origin, transform vs position, efek hover, dan 7 jebakan transform di CSS.
-
CSS · 19 menitKenapa Elemen Membengkak Setelah Diberi Padding? Box Model CSS
Padding menambah ukuran kotak kecuali box-sizing border-box aktif. Pahami box model, shorthand 1-4 nilai, padding persen, dan 6 kesalahan padding umum.
-
HTML · 20 menitKenapa width dan margin Tidak Jalan di Elemen Inline?
Elemen inline mengabaikan width, height, dan margin vertikal. Pahami penyebabnya, solusi inline-block, celah antar inline-block, dan 7 kesalahan umumnya.
-
CSS · 19 menitKenapa height: 100% Tidak Bekerja? Jebakan Ukuran Elemen di CSS
Kupas jebakan width dan height di CSS: height 100% yang tidak berefek, box-sizing border-box, min/max-width, dan 7 kesalahan ukuran yang paling sering terjadi.
-
CSS · 16 menitCSS Flexbox vs Grid: Kapan Pakai Yang Mana?
Panduan lengkap perbedaan Flexbox dan CSS Grid: satu vs dua dimensi, kapan pakai yang mana, contoh nyata, kesalahan umum, dan cara menggabungkan keduanya.
-
CSS · 18 menitMemahami CSS Grid dari Nol, Panduan Lengkap + Demo Interaktif
Belajar CSS Grid dari nol: grid-template-columns, grid-template-rows, gap, satuan fr, repeat, minmax, grid-template-areas, dan cara membuat grid responsif tanpa media query. Lengkap dengan demo interaktif.
-
HTML · 19 menitCara Membuat Website Pertama dengan HTML dan CSS (Dari Nol Sampai Online)
Cara membuat website pertama langkah demi langkah dengan HTML dan CSS, struktur, styling, responsive, sampai deploy gratis. Proyek nyata dari nol untuk pemula.
-
Tailwind · 20 menitTailwind CSS: Panduan Lengkap Styling Cepat Tanpa Menulis CSS Manual
Tailwind CSS adalah utility-first CSS framework. Panduan lengkap untuk pemula: cara install Tailwind CSS, perbandingan Tailwind vs CSS biasa, proyek mini langkah demi langkah, kesalahan umum, dan FAQ.
Latihan CSS langsung di browser
Materi interaktif, kuis, dan game CSS di Hyper Sheets. Gratis, tanpa install.