CSS3 DOCS

SELECTOR

*
Description: Universal selector — pilih semua elemen.
Example: 
* { margin: 0; }
Output: Semua elemen
element
Description: Type selector — pilih berdasarkan tag.
Example: 
p { color: red; }
Output: Semua <p>
.class
Description: Class selector — pilih berdasarkan class.
Example: 
.card { padding: 10px; }
Output: Semua class='card'
#id
Description: ID selector — pilih berdasarkan id.
Example: 
#header { height: 60px; }
Output: Elemen id='header'
[attr]
Description: Attribute selector — punya atribut.
Example: 
[disabled] { opacity: 0.5; }
Output: Elemen dengan disabled
[attr=value]
Description: Attribute selector — nilai tepat.
Example: 
[type='text'] { border: 1px solid; }
Output: input type=text
[attr^=value]
Description: Attribute selector — diawali value.
Example: 
[href^='https'] { color: green; }
Output: Link HTTPS
[attr$=value]
Description: Attribute selector — diakhiri value.
Example: 
[src$='.png'] { border: none; }
Output: Gambar PNG
[attr*=value]
Description: Attribute selector — mengandung value.
Example: 
[class*='btn'] { cursor: pointer; }
Output: Class mengandung btn
A B
Description: Descendant selector — B di dalam A.
Example: 
div p { margin: 0; }
Output: p di dalam div
A > B
Description: Child selector — B anak langsung A.
Example: 
ul > li { list-style: none; }
Output: li langsung di ul
A + B
Description: Adjacent sibling — B tepat setelah A.
Example: 
h1 + p { margin-top: 0; }
Output: p setelah h1
A ~ B
Description: General sibling — B setelah A.
Example: 
h1 ~ p { color: gray; }
Output: Semua p setelah h1
A, B
Description: Group selector — A dan B.
Example: 
h1, h2, h3 { font-family: sans-serif; }
Output: h1, h2, h3
:first-child
Description: Pseudo-class — anak pertama.
Example: 
li:first-child { font-weight: bold; }
Output: li pertama
:last-child
Description: Pseudo-class — anak terakhir.
Example: 
li:last-child { border-bottom: none; }
Output: li terakhir
:nth-child(n)
Description: Pseudo-class — anak ke-n.
Example: 
tr:nth-child(odd) { background: #eee; }
Output: Baris ganjil
:nth-of-type(n)
Description: Pseudo-class — elemen ke-n dari tipenya.
Example: 
p:nth-of-type(2) { color: red; }
Output: p kedua
:hover
Description: Pseudo-class — saat di-hover.
Example: 
a:hover { text-decoration: underline; }
Output: Saat hover
:focus
Description: Pseudo-class — saat fokus.
Example: 
input:focus { outline: 2px solid blue; }
Output: Saat fokus
:active
Description: Pseudo-class — saat diklik.
Example: 
button:active { transform: scale(0.98); }
Output: Saat ditekan
:visited
Description: Pseudo-class — link sudah dikunjungi.
Example: 
a:visited { color: purple; }
Output: Link visited
:disabled
Description: Pseudo-class — elemen disabled.
Example: 
input:disabled { background: #ccc; }
Output: Input disabled
:checked
Description: Pseudo-class — checkbox/radio checked.
Example: 
input:checked + label { color: green; }
Output: Checked
:not(selector)
Description: Pseudo-class — negasi.
Example: 
p:not(.active) { display: none; }
Output: p tanpa class active
:has(selector)
Description: Pseudo-class — parent mengandung.
Example: 
div:has(img) { padding: 10px; }
Output: Div yang punya img
::before
Description: Pseudo-element — sebelum konten.
Example: 
.icon::before { content: '★'; }
Output: ★ sebelum teks
::after
Description: Pseudo-element — setelah konten.
Example: 
.clearfix::after { content: ''; display: table; }
Output: Clearfix
::first-letter
Description: Pseudo-element — huruf pertama.
Example: 
p::first-letter { font-size: 2em; }
Output: Huruf pertama besar
::first-line
Description: Pseudo-element — baris pertama.
Example: 
p::first-line { font-weight: bold; }
Output: Baris pertama bold
::placeholder
Description: Pseudo-element — placeholder input.
Example: 
input::placeholder { color: #999; }
Output: Placeholder abu
::selection
Description: Pseudo-element — teks yang di-select.
Example: 
::selection { background: yellow; }
Output: Seleksi kuning

PROPERTI-TEKS

color
Description: Warna teks.
Example: 
color: #333;
Output: Teks abu gelap
font-family
Description: Jenis font.
Example: 
font-family: 'Inter', sans-serif;
Output: Font Inter
font-size
Description: Ukuran font.
Example: 
font-size: 16px;
Output: 16px
font-weight
Description: Ketebalan font (100-900, bold, normal).
Example: 
font-weight: 700;
Output: Bold
font-style
Description: Gaya font (normal, italic).
Example: 
font-style: italic;
Output: Miring
text-align
Description: Rata teks (left, center, right, justify).
Example: 
text-align: center;
Output: Tengah
text-decoration
Description: Garis dekorasi (underline, line-through, none).
Example: 
text-decoration: underline;
Output: Garis bawah
text-transform
Description: Transformasi (uppercase, lowercase, capitalize).
Example: 
text-transform: uppercase;
Output: HURUF BESAR
text-indent
Description: Indentasi baris pertama.
Example: 
text-indent: 20px;
Output: Awal masuk 20px
letter-spacing
Description: Jarak antar huruf.
Example: 
letter-spacing: 2px;
Output: Jarak 2px
word-spacing
Description: Jarak antar kata.
Example: 
word-spacing: 5px;
Output: Jarak 5px
line-height
Description: Tinggi baris.
Example: 
line-height: 1.6;
Output: 1.6x font-size
white-space
Description: Penanganan spasi (normal, nowrap, pre, pre-wrap).
Example: 
white-space: nowrap;
Output: Tidak wrap
word-break
Description: Pemotongan kata (normal, break-all, keep-all).
Example: 
word-break: break-all;
Output: Potong di mana saja
overflow-wrap
Description: Wrap kata panjang (normal, break-word).
Example: 
overflow-wrap: break-word;
Output: Wrap kata panjang
text-overflow
Description: Tanda overflow teks (clip, ellipsis).
Example: 
text-overflow: ellipsis;
Output: ...
text-shadow
Description: Bayangan teks (x y blur color).
Example: 
text-shadow: 1px 1px 2px #000;
Output: Bayangan
vertical-align
Description: Posisi vertikal (baseline, top, middle, bottom).
Example: 
vertical-align: middle;
Output: Tengah
direction
Description: Arah teks (ltr, rtl).
Example: 
direction: rtl;
Output: Kanan ke kiri
unicode-bidi
Description: Override arah teks.
Example: 
unicode-bidi: bidi-override;
Output: Override arah

PROPERTI-BOX

width
Description: Lebar elemen.
Example: 
width: 300px;
Output: 300px
height
Description: Tinggi elemen.
Example: 
height: 200px;
Output: 200px
min-width
Description: Lebar minimum.
Example: 
min-width: 100px;
Output: Min 100px
max-width
Description: Lebar maksimum.
Example: 
max-width: 600px;
Output: Max 600px
min-height
Description: Tinggi minimum.
Example: 
min-height: 50vh;
Output: Min 50vh
max-height
Description: Tinggi maksimum.
Example: 
max-height: 400px;
Output: Max 400px
padding
Description: Jarak dalam (shorthand: atas kanan bawah kiri).
Example: 
padding: 10px 20px;
Output: 10px atas-bawah, 20px kiri-kanan
padding-top
Description: Padding atas.
Example: 
padding-top: 10px;
Output: 10px
padding-right
Description: Padding kanan.
Example: 
padding-right: 15px;
Output: 15px
padding-bottom
Description: Padding bawah.
Example: 
padding-bottom: 10px;
Output: 10px
padding-left
Description: Padding kiri.
Example: 
padding-left: 15px;
Output: 15px
margin
Description: Jarak luar (shorthand: atas kanan bawah kiri).
Example: 
margin: 0 auto;
Output: 0 atas-bawah, auto kiri-kanan
margin-top
Description: Margin atas.
Example: 
margin-top: 20px;
Output: 20px
margin-right
Description: Margin kanan.
Example: 
margin-right: 10px;
Output: 10px
margin-bottom
Description: Margin bawah.
Example: 
margin-bottom: 20px;
Output: 20px
margin-left
Description: Margin kiri.
Example: 
margin-left: 10px;
Output: 10px
border
Description: Garis tepi (width style color).
Example: 
border: 1px solid #ccc;
Output: Garis 1px solid abu
border-width
Description: Lebar border.
Example: 
border-width: 2px;
Output: 2px
border-style
Description: Gaya border (solid, dashed, dotted, double, none).
Example: 
border-style: dashed;
Output: Putus-putus
border-color
Description: Warna border.
Example: 
border-color: red;
Output: Merah
border-radius
Description: Sudut melengkung.
Example: 
border-radius: 8px;
Output: Radius 8px
border-top-left-radius
Description: Radius kiri atas.
Example: 
border-top-left-radius: 12px;
Output: 12px
box-sizing
Description: Model box (content-box, border-box).
Example: 
box-sizing: border-box;
Output: Termasuk border & padding
box-shadow
Description: Bayangan kotak (x y blur spread color).
Example: 
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
Output: Bayangan
outline
Description: Garis luar (di luar border).
Example: 
outline: 2px solid blue;
Output: Garis biru
outline-offset
Description: Jarak outline dari border.
Example: 
outline-offset: 3px;
Output: 3px
overflow
Description: Konten berlebih (visible, hidden, scroll, auto).
Example: 
overflow: auto;
Output: Scroll jika perlu
overflow-x
Description: Overflow horizontal.
Example: 
overflow-x: hidden;
Output: Sembunyi horizontal
overflow-y
Description: Overflow vertikal.
Example: 
overflow-y: scroll;
Output: Scroll vertikal
visibility
Description: Visibilitas (visible, hidden, collapse).
Example: 
visibility: hidden;
Output: Sembunyi (tetap makan ruang)
opacity
Description: Transparansi (0-1).
Example: 
opacity: 0.5;
Output: 50% transparan
cursor
Description: Bentuk kursor.
Example: 
cursor: pointer;
Output: Tangan
user-select
Description: Bisa diseleksi? (none, auto, text, all).
Example: 
user-select: none;
Output: Tidak bisa seleksi
pointer-events
Description: Interaksi pointer (auto, none).
Example: 
pointer-events: none;
Output: Klik tembus

PROPERTI-BACKGROUND

background-color
Description: Warna latar.
Example: 
background-color: #f0f0f0;
Output: Abu muda
background-image
Description: Gambar latar.
Example: 
background-image: url('bg.jpg');
Output: Gambar
background-size
Description: Ukuran gambar (cover, contain, px, %).
Example: 
background-size: cover;
Output: Menutupi
background-position
Description: Posisi gambar.
Example: 
background-position: center;
Output: Tengah
background-repeat
Description: Pengulangan (repeat, no-repeat, repeat-x, repeat-y).
Example: 
background-repeat: no-repeat;
Output: Tidak ulang
background-attachment
Description: Latar mengikuti scroll? (scroll, fixed, local).
Example: 
background-attachment: fixed;
Output: Tetap
background
Description: Shorthand semua background.
Example: 
background: #fff url('bg.jpg') no-repeat center/cover;
Output: Kombinasi
background-clip
Description: Batas background (border-box, padding-box, content-box, text).
Example: 
background-clip: text;
Output: Clip ke teks
background-origin
Description: Titik asal background.
Example: 
background-origin: padding-box;
Output: Dari padding
backdrop-filter
Description: Filter blur/dll pada area di belakang.
Example: 
backdrop-filter: blur(10px);
Output: Blur 10px

PROPERTI-DISPLAY

display
Description: Tipe kotak (block, inline, inline-block, none, flex, grid).
Example: 
display: flex;
Output: Flex
display: block
Description: Elemen block — lebar penuh, baris baru.
Example: 
display: block;
Output: Block
display: inline
Description: Elemen inline — tidak bisa diatur width/height.
Example: 
display: inline;
Output: Inline
display: inline-block
Description: Inline tapi bisa atur width/height.
Example: 
display: inline-block;
Output: Inline-block
display: none
Description: Sembunyikan elemen (tidak makan ruang).
Example: 
display: none;
Output: Hilang
display: flex
Description: Flexbox container.
Example: 
display: flex;
Output: Flex
display: grid
Description: Grid container.
Example: 
display: grid;
Output: Grid
display: inline-flex
Description: Flex tapi inline.
Example: 
display: inline-flex;
Output: Inline-flex
display: inline-grid
Description: Grid tapi inline.
Example: 
display: inline-grid;
Output: Inline-grid

FLEXBOX

flex-direction
Description: Arah sumbu (row, row-reverse, column, column-reverse).
Example: 
flex-direction: row;
Output: Kiri ke kanan
flex-wrap
Description: Wrap item (nowrap, wrap, wrap-reverse).
Example: 
flex-wrap: wrap;
Output: Turun jika penuh
flex-flow
Description: Shorthand direction + wrap.
Example: 
flex-flow: row wrap;
Output: Row + wrap
justify-content
Description: Posisi di sumbu utama (flex-start, center, space-between, space-around, space-evenly).
Example: 
justify-content: center;
Output: Tengah horizontal
align-items
Description: Posisi di sumbu silang (stretch, flex-start, center, baseline).
Example: 
align-items: center;
Output: Tengah vertikal
align-content
Description: Posisi baris saat wrap (stretch, center, space-between).
Example: 
align-content: space-between;
Output: Renggang
gap
Description: Jarak antar item (row-gap column-gap).
Example: 
gap: 16px;
Output: 16px
flex-grow
Description: Proporsi pertumbuhan (child).
Example: 
flex-grow: 1;
Output: Ambil sisa ruang
flex-shrink
Description: Proporsi penyusutan (child).
Example: 
flex-shrink: 0;
Output: Tidak susut
flex-basis
Description: Ukuran awal child.
Example: 
flex-basis: 200px;
Output: 200px awal
flex
Description: Shorthand grow shrink basis.
Example: 
flex: 1 0 auto;
Output: Grow=1, shrink=0
align-self
Description: Override align-items untuk 1 child.
Example: 
align-self: flex-end;
Output: Di bawah
order
Description: Urutan child (default 0).
Example: 
order: -1;
Output: Paling depan

GRID

grid-template-columns
Description: Jumlah & lebar kolom.
Example: 
grid-template-columns: 1fr 2fr 1fr;
Output: 3 kolom
grid-template-rows
Description: Jumlah & tinggi baris.
Example: 
grid-template-rows: auto 1fr;
Output: 2 baris
grid-template-areas
Description: Area bernama.
Example: 
grid-template-areas: 'header header' 'nav main';
Output: Layout area
grid-auto-columns
Description: Lebar kolom implicit.
Example: 
grid-auto-columns: 100px;
Output: 100px
grid-auto-rows
Description: Tinggi baris implicit.
Example: 
grid-auto-rows: minmax(50px, auto);
Output: Min 50px
grid-auto-flow
Description: Arah penempatan (row, column, dense).
Example: 
grid-auto-flow: dense;
Output: Isi rapat
grid-column
Description: Shorthand start/end kolom.
Example: 
grid-column: 1 / 3;
Output: Kolom 1-2
grid-row
Description: Shorthand start/end baris.
Example: 
grid-row: 1 / span 2;
Output: Baris 1-2
grid-area
Description: Penempatan di area bernama.
Example: 
grid-area: header;
Output: Di area header
justify-items
Description: Posisi horizontal item (start, center, stretch).
Example: 
justify-items: center;
Output: Tengah horizontal
align-items
Description: Posisi vertikal item (start, center, stretch).
Example: 
align-items: center;
Output: Tengah vertikal
place-items
Description: Shorthand align + justify.
Example: 
place-items: center;
Output: Tengah semua
justify-content
Description: Posisi grid container horizontal.
Example: 
justify-content: center;
Output: Tengah
align-content
Description: Posisi grid container vertikal.
Example: 
align-content: start;
Output: Atas
gap
Description: Jarak antar cell (row-gap column-gap).
Example: 
gap: 20px;
Output: 20px

PROPERTI-POSISI

position
Description: Metode posisi (static, relative, absolute, fixed, sticky).
Example: 
position: relative;
Output: Relatif
position: relative
Description: Relatif terhadap posisi normal.
Example: 
position: relative; top: 10px;
Output: Turun 10px
position: absolute
Description: Relatif terhadap parent terdekat yang positioned.
Example: 
position: absolute; top: 0; right: 0;
Output: Pojok kanan atas
position: fixed
Description: Relatif terhadap viewport.
Example: 
position: fixed; bottom: 0;
Output: Nempel bawah
position: sticky
Description: Sticky saat di-scroll.
Example: 
position: sticky; top: 0;
Output: Lengket di atas
top
Description: Jarak dari atas.
Example: 
top: 20px;
Output: 20px
right
Description: Jarak dari kanan.
Example: 
right: 10px;
Output: 10px
bottom
Description: Jarak dari bawah.
Example: 
bottom: 0;
Output: 0
left
Description: Jarak dari kiri.
Example: 
left: 0;
Output: 0
inset
Description: Shorthand top right bottom left.
Example: 
inset: 0;
Output: Semua 0
z-index
Description: Urutan tumpuk (semakin besar di atas).
Example: 
z-index: 10;
Output: Di atas
float
Description: Mengambang (left, right, none).
Example: 
float: left;
Output: Kiri
clear
Description: Menghentikan float (left, right, both).
Example: 
clear: both;
Output: Hentikan float

PROPERTI-TRANSFORM

transform
Description: Transformasi elemen.
Example: 
transform: rotate(45deg);
Output: Putar 45°
translate(x, y)
Description: Geser elemen.
Example: 
transform: translate(10px, -5px);
Output: Geser
translateX(x)
Description: Geser horizontal.
Example: 
transform: translateX(20px);
Output: Geser kanan
translateY(y)
Description: Geser vertikal.
Example: 
transform: translateY(-10px);
Output: Geser atas
rotate(deg)
Description: Putar elemen.
Example: 
transform: rotate(90deg);
Output: 90°
scale(x, y)
Description: Skala elemen.
Example: 
transform: scale(1.2);
Output: 120%
scaleX(x)
Description: Skala horizontal.
Example: 
transform: scaleX(0.5);
Output: 50% lebar
scaleY(y)
Description: Skala vertikal.
Example: 
transform: scaleY(1.5);
Output: 150% tinggi
skew(x, y)
Description: Miringkan elemen.
Example: 
transform: skew(10deg, 0);
Output: Miring 10°
transform-origin
Description: Titik pusat transformasi.
Example: 
transform-origin: top left;
Output: Dari pojok kiri atas
transform-style
Description: Ruang 3D (flat, preserve-3d).
Example: 
transform-style: preserve-3d;
Output: 3D
perspective
Description: Kedalaman 3D.
Example: 
perspective: 500px;
Output: 500px depth
backface-visibility
Description: Tampak belakang (visible, hidden).
Example: 
backface-visibility: hidden;
Output: Sembunyi belakang

PROPERTI-TRANSISI

transition
Description: Shorthand transisi (property duration timing delay).
Example: 
transition: all 0.3s ease;
Output: Semua 0.3s
transition-property
Description: Properti yang ditransisikan.
Example: 
transition-property: opacity, transform;
Output: Opacity & transform
transition-duration
Description: Durasi transisi.
Example: 
transition-duration: 0.5s;
Output: 0.5 detik
transition-timing-function
Description: Kurva percepatan (ease, linear, ease-in, ease-out, cubic-bezier).
Example: 
transition-timing-function: ease-in-out;
Output: ease-in-out
transition-delay
Description: Jeda sebelum transisi mulai.
Example: 
transition-delay: 0.2s;
Output: Tunda 0.2s

PROPERTI-ANIMASI

animation
Description: Shorthand animasi.
Example: 
animation: fadeIn 1s ease infinite;
Output: Animasi fadeIn
animation-name
Description: Nama keyframes.
Example: 
animation-name: slideUp;
Output: slideUp
animation-duration
Description: Durasi 1 siklus.
Example: 
animation-duration: 2s;
Output: 2 detik
animation-timing-function
Description: Kurva animasi.
Example: 
animation-timing-function: ease-out;
Output: ease-out
animation-delay
Description: Jeda sebelum mulai.
Example: 
animation-delay: 0.5s;
Output: Tunda 0.5s
animation-iteration-count
Description: Jumlah pengulangan (number, infinite).
Example: 
animation-iteration-count: infinite;
Output: Terus
animation-direction
Description: Arah (normal, reverse, alternate).
Example: 
animation-direction: alternate;
Output: Bolak-balik
animation-fill-mode
Description: State sebelum/sesudah (none, forwards, backwards, both).
Example: 
animation-fill-mode: forwards;
Output: Tetap di akhir
animation-play-state
Description: Jalan/berhenti (running, paused).
Example: 
animation-play-state: paused;
Output: Berhenti
@keyframes
Description: Definisi frame animasi.
Example: 
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
Output: Animasi fadeIn

PROPERTI-FILTER

filter
Description: Filter visual.
Example: 
filter: grayscale(100%);
Output: Hitam putih
blur(px)
Description: Blur.
Example: 
filter: blur(5px);
Output: Blur 5px
brightness(%)
Description: Kecerahan.
Example: 
filter: brightness(150%);
Output: 150% cerah
contrast(%)
Description: Kontras.
Example: 
filter: contrast(200%);
Output: Kontras tinggi
grayscale(%)
Description: Hitam putih.
Example: 
filter: grayscale(100%);
Output: Hitam putih
sepia(%)
Description: Efek sepia.
Example: 
filter: sepia(80%);
Output: Sepia
saturate(%)
Description: Saturasi warna.
Example: 
filter: saturate(200%);
Output: Warna tajam
opacity(%)
Description: Transparansi via filter.
Example: 
filter: opacity(50%);
Output: 50% transparan
invert(%)
Description: Balik warna.
Example: 
filter: invert(100%);
Output: Negatif
hue-rotate(deg)
Description: Putar hue.
Example: 
filter: hue-rotate(90deg);
Output: Hue geser 90°
drop-shadow(x y blur color)
Description: Bayangan via filter.
Example: 
filter: drop-shadow(2px 2px 4px #000);
Output: Bayangan

PROPERTI-LAINNYA

content
Description: Konten pseudo-element.
Example: 
content: '★';
Output: ★
counter-increment
Description: Increment counter.
Example: 
counter-increment: section;
Output: section++
counter-reset
Description: Reset counter.
Example: 
counter-reset: section 0;
Output: section = 0
clip-path
Description: Potong bentuk.
Example: 
clip-path: circle(50%);
Output: Lingkaran
object-fit
Description: Fit gambar (fill, contain, cover, none, scale-down).
Example: 
object-fit: cover;
Output: Menutupi
object-position
Description: Posisi gambar dalam kotak.
Example: 
object-position: center;
Output: Tengah
resize
Description: Bisa di-resize? (none, both, horizontal, vertical).
Example: 
resize: both;
Output: Bisa resize
accent-color
Description: Warna aksen form (checkbox, radio).
Example: 
accent-color: #6c5ce7;
Output: Ungu
caret-color
Description: Warna kursor input.
Example: 
caret-color: red;
Output: Kursor merah
scroll-behavior
Description: Scroll smooth atau instant.
Example: 
scroll-behavior: smooth;
Output: Smooth scroll
scroll-snap-type
Description: Snap scroll (none, x, y, both).
Example: 
scroll-snap-type: y mandatory;
Output: Snap vertikal
scroll-snap-align
Description: Posisi snap (none, start, center, end).
Example: 
scroll-snap-align: center;
Output: Snap ke tengah
will-change
Description: Beri tahu browser properti yang akan berubah.
Example: 
will-change: transform;
Output: Optimasi transform
contain
Description: Isolasi render (none, strict, content, size, layout, paint).
Example: 
contain: content;
Output: Isolasi
isolation
Description: Isolasi stacking context (auto, isolate).
Example: 
isolation: isolate;
Output: Stacking context baru
mix-blend-mode
Description: Blend dengan background.
Example: 
mix-blend-mode: multiply;
Output: Multiply
aspect-ratio
Description: Rasio aspek.
Example: 
aspect-ratio: 16/9;
Output: 16:9
image-rendering
Description: Kualitas scaling gambar (auto, crisp-edges, pixelated).
Example: 
image-rendering: pixelated;
Output: Pixelated
writing-mode
Description: Arah tulis (horizontal-tb, vertical-rl).
Example: 
writing-mode: vertical-rl;
Output: Tulisan vertikal

VARIABEL

--nama-variabel
Description: Deklarasi custom property / CSS variable.
Example: 
--primary: #6c5ce7;
Output: Variabel
var(--nama)
Description: Gunakan variabel.
Example: 
color: var(--primary);
Output: Warna ungu
var(--nama, fallback)
Description: Variabel dengan fallback.
Example: 
color: var(--primary, blue);
Output: Biru jika primary gak ada

MEDIA-QUERIES

@media (min-width: px)
Description: Query minimal lebar.
Example: 
@media (min-width: 768px) { }
Output: Tablet ke atas
@media (max-width: px)
Description: Query maksimal lebar.
Example: 
@media (max-width: 767px) { }
Output: Mobile
@media (min-width) and (max-width)
Description: Range lebar.
Example: 
@media (min-width: 768px) and (max-width: 1023px) { }
Output: Tablet only
@media (prefers-color-scheme: dark)
Description: Mode gelap.
Example: 
@media (prefers-color-scheme: dark) { }
Output: Dark mode
@media (prefers-reduced-motion: reduce)
Description: Aksesibilitas gerakan.
Example: 
@media (prefers-reduced-motion: reduce) { }
Output: Kurangi animasi
@media print
Description: Saat dicetak.
Example: 
@media print { }
Output: Print style

AT-RULES

@import
Description: Import stylesheet.
Example: 
@import url('style.css');
Output: Import CSS
@font-face
Description: Deklarasi font custom.
Example: 
@font-face { font-family: 'MyFont'; src: url('font.woff2'); }
Output: Font custom
@supports (property: value)
Description: Cek dukungan browser.
Example: 
@supports (display: grid) { }
Output: Kalau support grid
@layer
Description: Cascade layer — atur prioritas.
Example: 
@layer base { }
Output: Layer base
@container
Description: Container query.
Example: 
@container (min-width: 300px) { }
Output: Container 300px

UNIT

px
Description: Piksel.
Example: 
width: 200px;
Output: 200 piksel
%
Description: Persen terhadap parent.
Example: 
width: 50%;
Output: 50% parent
em
Description: Relatif terhadap font-size parent.
Example: 
font-size: 1.5em;
Output: 1.5x parent
rem
Description: Relatif terhadap font-size root (html).
Example: 
font-size: 1rem;
Output: 16px (default)
vw
Description: 1% lebar viewport.
Example: 
width: 100vw;
Output: Lebar penuh
vh
Description: 1% tinggi viewport.
Example: 
height: 100vh;
Output: Tinggi penuh
dvw / dvh
Description: Viewport dinamis (mobile browser).
Example: 
height: 100dvh;
Output: 100% viewport dinamis
svw / svh
Description: Viewport terkecil.
Example: 
height: 100svh;
Output: Viewport terkecil
lvh
Description: Viewport terbesar.
Example: 
height: 100lvh;
Output: Viewport terbesar
ch
Description: Lebar karakter '0'.
Example: 
width: 60ch;
Output: 60 karakter
ex
Description: Tinggi huruf 'x'.
Example: 
line-height: 2ex;
Output: 2x tinggi x
fr
Description: Fraction unit untuk grid.
Example: 
grid-template-columns: 1fr 2fr;
Output: 1 bagian : 2 bagian
deg
Description: Derajat.
Example: 
transform: rotate(45deg);
Output: 45 derajat
rad
Description: Radian.
Example: 
transform: rotate(3.14rad);
Output: ~180°
turn
Description: Putaran.
Example: 
transform: rotate(0.5turn);
Output: 180°
s
Description: Detik.
Example: 
transition: all 0.3s;
Output: 0.3 detik
ms
Description: Milidetik.
Example: 
transition: all 300ms;
Output: 300 milidetik
dpi / dpcm
Description: Resolusi (media queries).
Example: 
@media (min-resolution: 2dppx) { }
Output: Retina
calc()
Description: Kalkulasi matematika.
Example: 
width: calc(100% - 20px);
Output: 100% - 20px
min()
Description: Nilai terkecil.
Example: 
width: min(100%, 600px);
Output: Terbatas 600px
max()
Description: Nilai terbesar.
Example: 
width: max(300px, 50%);
Output: Minimal 300px
clamp(min, ideal, max)
Description: Clamp nilai.
Example: 
font-size: clamp(1rem, 2.5vw, 2rem);
Output: 1rem - 2rem fluid

WARNA

nama warna
Description: Nama warna CSS.
Example: 
color: red;
Output: Merah
#RRGGBB
Description: Hex 6 digit.
Example: 
color: #ff0000;
Output: Merah
#RGB
Description: Hex 3 digit.
Example: 
color: #f00;
Output: Merah
rgb(r, g, b)
Description: RGB (0-255).
Example: 
color: rgb(255, 0, 0);
Output: Merah
rgba(r, g, b, a)
Description: RGB + alpha (0-1).
Example: 
color: rgba(255, 0, 0, 0.5);
Output: Merah 50%
hsl(h, s%, l%)
Description: Hue Saturation Lightness.
Example: 
color: hsl(0, 100%, 50%);
Output: Merah
hsla(h, s%, l%, a)
Description: HSL + alpha.
Example: 
color: hsla(0, 100%, 50%, 0.5);
Output: Merah 50%
currentColor
Description: Warna teks saat ini.
Example: 
border-color: currentColor;
Output: Sama warna teks
transparent
Description: Transparan penuh.
Example: 
background: transparent;
Output: Tidak ada