Cheat Sheet Tabel CSS
Navigasi cepat ke materi CSS! Tabel referensi properti CSS dasar, selector, konsep layout, dan link ke penjelasan detailnya.
Tabel Cheat Sheet CSS: Referensi Cepat & Link Materi
Berikut adalah tabel referensi cepat untuk properti-properti dan konsep CSS dasar yang paling sering digunakan. Gunakan ini sebagai contekan atau navigasi cepat untuk melompat kembali ke penjelasan yang lebih detail di panduan ini.
(Catatan: Path link di kolom "Link ke Materi" adalah contoh dan perlu disesuaikan dengan struktur URL/slug dokumentasi final Anda).
| Kategori | Properti / Konsep Utama | Deskripsi Singkat | Link ke Materi |
|---|---|---|---|
| Dasar CSS | Sintaks Aturan CSS | Selector { properti: nilai; } | Sintaks Dasar CSS |
| Cara Menambahkan CSS | External (<link>), Internal (<style>), Inline (style=""). | Menambahkan CSS ke HTML | |
Komentar CSS (/* ... */) | Catatan yang tidak diproses browser. | Sintaks Dasar CSS | |
| Selector Dasar | namaTag (Type) | Menargetkan semua elemen dengan tag tersebut. | Selector Dasar CSS |
.namaClass (Class) | Menargetkan elemen dengan atribut class. | Selector Dasar CSS | |
#idUnik (ID) | Menargetkan satu elemen unik dengan atribut id. | Selector Dasar CSS | |
| Selector Kombinasi & Grup | , (Grouping) | Menerapkan style yang sama ke beberapa selector. | Selector Kombinasi & Grup |
(Descendant) | Menargetkan elemen turunan (anak, cucu, dst.). | Selector Kombinasi & Grup | |
> (Child) | Menargetkan elemen anak langsung. | Selector Kombinasi & Grup | |
+ (Adjacent Sibling) | Menargetkan saudara kandung yang langsung mengikuti. | Selector Kombinasi & Grup | |
~ (General Sibling) | Menargetkan semua saudara kandung yang mengikuti. | Selector Kombinasi & Grup | |
| Selector Lanjutan | [atribut], [attr="nilai"] | Menargetkan elemen berdasarkan atribut atau nilai atributnya. | Selector Atribut & Pseudo |
:hover, :focus, :nth-child() | Pseudo-classes: menargetkan state atau posisi elemen. | Selector Atribut & Pseudo | |
::before, ::after, ::first-letter | Pseudo-elements: menargetkan bagian spesifik atau menambahkan konten. | Selector Atribut & Pseudo | |
| Warna & Background | color | Mengubah warna teks. | Warna, Background, Gradient |
background-color | Mengubah warna latar belakang. | Warna, Background, Gradient | |
background-image | Menggunakan gambar sebagai latar belakang. | Warna, Background, Gradient | |
background-repeat, position, size | Mengatur perilaku gambar background. | Warna, Background, Gradient | |
linear-gradient(), radial-gradient() | Membuat efek gradasi warna. | Warna, Background, Gradient | |
| Tipografi | font-family | Menentukan jenis font. | Tipografi CSS |
font-size | Menentukan ukuran font. | Tipografi CSS | |
font-weight | Menentukan ketebalan font. | Tipografi CSS | |
font-style | Menentukan gaya font (italic, oblique). | Tipografi CSS | |
text-align | Mengatur perataan teks horizontal. | Tipografi CSS | |
line-height | Mengatur jarak antar baris teks. | Tipografi CSS | |
text-decoration | Mengatur dekorasi teks (underline, line-through). | Tipografi CSS | |
| Box Model | width, height | Mengatur lebar dan tinggi area konten. | Box Model CSS |
padding | Ruang antara konten dan border (dalam). | Box Model CSS | |
border | Garis tepi elemen. Atribut border-radius untuk sudut melengkung. | Box Model CSS | |
margin | Ruang di luar border (jarak antar elemen). | Box Model CSS | |
box-sizing: border-box; | Mengubah cara width & height dihitung (termasuk padding & border). | Box Model CSS | |
| Tampilan & Efek | box-shadow, text-shadow | Menambahkan efek bayangan pada kotak atau teks. | Shadow & Outline CSS |
outline | Garis tambahan di luar border, tidak mempengaruhi layout. | Shadow & Outline CSS | |
display | Mengontrol cara elemen ditampilkan (block, inline, none, flex, grid). | Display, Visibility, Opacity | |
visibility | Menyembunyikan elemen tapi tetap mengambil ruang (hidden). | Display, Visibility, Opacity | |
opacity | Mengatur tingkat transparansi elemen. | Display, Visibility, Opacity | |
transform | Mengubah bentuk/posisi elemen (translate, scale, rotate, skew). | Transformasi CSS | |
transform-origin | Menentukan titik pusat transformasi. | Transformasi CSS | |
| Layouting | position | Mengatur metode penempatan elemen (static, relative, absolute, fixed, sticky). | Positioning CSS |
top, right, bottom, left | Properti offset untuk elemen yang diposisikan. | Positioning CSS | |
z-index | Mengatur urutan tumpukan elemen yang diposisikan. | Positioning CSS | |
Flexbox (display: flex;) | Sistem layout satu dimensi (baris atau kolom). | CSS Flexbox | |
flex-direction, justify-content, align-items | Properti utama Flex Container. | CSS Flexbox | |
flex (item), flex-grow, flex-shrink | Properti utama Flex Items. | CSS Flexbox | |
Grid (display: grid;) | Sistem layout dua dimensi (baris dan kolom). | CSS Grid Layout | |
grid-template-columns/rows/areas | Mendefinisikan struktur grid. | CSS Grid Layout | |
gap | Jarak antar jalur grid. | CSS Grid Layout | |
grid-column, grid-row, grid-area | Menempatkan item dalam grid. | CSS Grid Layout | |
| Responsif | @media (kondisi) { ... } | Media Queries: menerapkan style berdasarkan kondisi perangkat (misal, lebar layar). | Desain Responsif & Media Queries |
prefers-color-scheme | Media feature untuk deteksi dark/light mode. | Desain Responsif & Media Queries | |
| Unit & Aturan | px, em, rem, %, vw, vh | Berbagai unit ukuran (absolut & relatif). | Unit & Nilai CSS |
calc(), var() | Fungsi CSS untuk kalkulasi dan variabel. | Unit & Nilai CSS | |
| Spesifisitas, Inheritance, Cascade | Aturan bagaimana browser menentukan style yang menang. | Spesifisitas, Inheritance, Cascade | |
| Animasi | transition | Membuat perubahan properti menjadi animasi halus. | Transisi CSS |
animation, @keyframes | Membuat animasi yang lebih kompleks dengan beberapa tahapan. | Animasi CSS (Keyframes) |