Cheat Sheet CSS
Terakhir diperbarui
Selector
Cara memilih elemen yang ingin kamu beri gaya.
| Selector | Yang dipilih |
|---|---|
* | Semua elemen |
p | Semua elemen <p> (berdasarkan tag) |
.btn | Elemen dengan class="btn" |
#main | Elemen dengan id="main" |
div p | Semua <p> di dalam <div> (turunan) |
div > p | Hanya anak langsung |
a:hover | Link saat kursor berada di atasnya (pseudo-class) |
li:first-child | <li> pertama di dalam induknya |
li:nth-child(2n) | Setiap <li> genap |
input[type="text"] | Input yang punya atribut tersebut |
p::before | Konten buatan sebelum <p> (pseudo-element) |
Box model
Setiap elemen adalah kotak: content, padding, border, margin.
| Properti | Kegunaan |
|---|---|
width / height | Ukuran kotak konten |
padding | Ruang di dalam border |
border | 1px solid #333: lebar, gaya, warna |
margin | Ruang di luar border |
box-sizing: border-box | Membuat lebar sudah termasuk padding + border |
margin: 0 auto | Menaruh elemen blok di tengah secara horizontal |
overflow: hidden | Memotong konten yang meluber |
Tipografi & warna
| Properti | Contoh |
|---|---|
color | color: #333: warna teks |
background | background: #fff atau gambar/gradien |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (atau rem, em) |
font-weight | 400 (normal) … 700 (tebal) |
line-height | 1.5: jarak antarbaris |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Tata letak satu dimensi: baris atau kolom. Atur display: flex pada elemen induk.
| Properti (pada container) | Kegunaan |
|---|---|
display: flex | Menjadikan anak-anaknya flex item |
flex-direction | row (default) atau column |
justify-content | Meratakan sepanjang sumbu utama (center, space-between) |
align-items | Meratakan sepanjang sumbu silang (center, stretch) |
gap | Jarak antar-item, misalnya gap: 16px |
flex-wrap | wrap membuat item turun ke baris baru |
flex: 1 (pada anak) | Item membesar untuk mengisi ruang yang tersedia |
Grid
Tata letak dua dimensi. Atur display: grid pada elemen induk.
| Properti | Kegunaan |
|---|---|
display: grid | Menjadikan anak-anaknya grid item |
grid-template-columns | 1fr 1fr 1fr atau repeat(3, 1fr) |
grid-template-rows | Menentukan ukuran baris |
gap | Jarak antarbaris dan antarkolom |
grid-column | 1 / 3: membentangkan item melintasi beberapa kolom |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) untuk grid responsif |
place-items: center | Menaruh setiap item di tengah selnya |
Positioning & display
| Properti / nilai | Kegunaan |
|---|---|
position: static | Default: mengikuti alur normal |
position: relative | Bergeser dari posisi normalnya |
position: absolute | Diposisikan terhadap ancestor terdekat yang diposisikan |
position: fixed | Menempel pada viewport |
position: sticky | Menempel saat halaman digulir sampai batas tertentu |
top / right / bottom / left | Jarak geser untuk elemen yang diposisikan |
z-index | Urutan tumpukan (lebih tinggi = di atas) |
display: none | Menghapus elemen dari tata letak |
display: inline-block | Mengalir inline tetapi bisa diberi width/height |
Transition & transform
| Properti | Contoh |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0): memindahkan |
transform: scale | scale(1.1): mengubah ukuran |
transform: rotate | rotate(45deg) |
opacity | 0 (tak terlihat) … 1 (penuh) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px: sudut membulat |
Satuan & desain responsif
| Satuan / fitur | Arti |
|---|---|
px | Piksel absolut |
% | Relatif terhadap induk |
rem | Relatif terhadap ukuran font root |
em | Relatif terhadap ukuran font saat ini |
vw / vh | 1% dari lebar / tinggi viewport |
fr | Pecahan dari ruang kosong (grid) |
@media (max-width: 600px) { … } | Menerapkan aturan di bawah breakpoint |
Selector, box model, flexbox, grid, dan properti yang selalu kamu lupa, dalam satu halaman. Cheat sheet CSS ini adalah referensi cepat untuk memberi gaya dan menata halaman web, dari memilih elemen sampai menaruhnya di tengah.
Semua yang ada di sini adalah CSS standar yang berjalan di browser modern. Salin sebuah aturan, atau coba langsung di playground HTML, tempat kamu bisa mengedit CSS dengan pratinjau instan. Pasangkan dengan cheat sheet HTML untuk markup-nya, atau pelajari tata letak dari nol di kursus CSS interaktif gratis dari Coddy.
FAQ cheat sheet CSS
Apakah cheat sheet CSS ini gratis?
Ya. Cheat sheet CSS ini gratis tanpa perlu daftar. Simpan di bookmark dan pakai kapan pun kamu perlu mencari selector, properti, atau pola tata letak.
Sebaiknya saya pakai flexbox atau grid?
Pakai flexbox untuk tata letak satu dimensi: deretan tombol, navbar, atau item dalam satu baris atau kolom. Pakai grid untuk tata letak dua dimensi saat kamu mengatur baris dan kolom sekaligus, seperti tata letak halaman atau galeri kartu. Keduanya cocok dipakai bersama: grid berisi kartu yang masing-masing memakai flexbox di dalamnya adalah pola yang umum.
Bagaimana cara menaruh div di tengah dengan CSS?
display: flex; justify-content: center; align-items: center; menaruh elemen anak di tengah secara horizontal dan vertikal. Untuk menaruh elemen blok yang lebarnya sudah ditentukan di tengah secara horizontal saja, margin: 0 auto masih berfungsi.Bisakah saya berlatih CSS secara online?
Bisa. Buka playground HTML untuk menulis HTML dan CSS bersama dengan pratinjau langsung. Kalau kamu ingin belajar terarah, kursus CSS interaktif gratis dari Coddy membahas selector, box model, flexbox, dan grid langkah demi langkah.
Apakah cheat sheet ini cocok untuk pemula?
Cocok. Isinya bergerak dari selector dan box model (fondasinya) ke flexbox, grid, dan transition, jadi kamu bisa mulai dari bagian atas lalu pelan-pelan menguasai tata letak modern.
Sumber terkait
Cheat sheet lainnya
