CSS Properties Reference

LAYOUT — display

display

blockinlineinline-blockflexgridnone
block = full width. flex/grid = layout. none = hidden

position

staticrelativeabsolutefixedsticky
static=normal flow. absolute=relative to parent. fixed=relative to viewport

top/right/bottom/left

020px50%auto
only works with non-static position

z-index

0101009999
stacking order. higher = on top. only on positioned elements

overflow

visiblehiddenautoscroll
hidden=clip. auto=scroll if needed

FLEXBOX

display: flex

activates flexbox on container

flex-direction

rowrow-reversecolumncolumn-reverse

justify-content

flex-startcenterflex-endspace-betweenspace-evenly
main axis alignment

align-items

flex-startcenterflex-endstretch
cross axis alignment

gap

8px16px 24px
space between items (row gap, column gap)

flex

10 0 autonone
shorthand: flex-grow flex-shrink flex-basis

SPACING

margin

016px0 auto8px 16px
outer space. auto horizontally = center block element

padding

016px8px 16px4px 8px 12px 16px
inner space. 1 val=all 2 vals=top/bottom,left/right

width / height

100px50%100vwautofit-contentmin-content

max-width

750px100%none
cap width but allow smaller. use for content containers

box-sizing

border-boxcontent-box
border-box: width includes padding+border (always use this)

TYPOGRAPHY

font-family

'Inter', sans-serifmonospace
always add fallback: 'Font', fallback

font-size

14px1rem1.2emclamp(14px,2vw,18px)

font-weight

400500600700800
400=regular 500=medium 600=semibold 700=bold

line-height

11.41.624px
unitless multiplier recommended. 1.5-1.7 for body text

letter-spacing

normal0.5px2px-0.5px
tight for headings. wide for uppercase labels

text-overflow

ellipsisclip
needs overflow:hidden + white-space:nowrap

VISUAL

background

#fffrgba(0,0,0,0.5)linear-gradient()url()

border

1px solid #3332px dashed rednone

border-radius

4px8px50%100px
50%=circle. 100px=pill shape

box-shadow

0 2px 8px rgba(0,0,0,0.3)inset 0 1px 2px
x y blur spread color. inset=inner shadow

opacity

00.51
affects element AND children. use rgba() for just color

ANIMATION

transition

all 0.2s easeopacity 0.3s, transform 0.2s
property duration timing. specify property not 'all'

transform

translateX(10px)scale(1.05)rotate(45deg)translateY(-2px)

animation

name 1s ease infinitefadeIn 0.3s forwards

cursor

defaultpointernot-allowedtextwaitgrab

user-select

nonetextall
none=prevent text selection (good for buttons/icons)

pointer-events

noneauto
none=pass clicks through element (overlay tooltips)