🎯Selectors
*Universal selector
elementType selector (e.g. div)
.classClass selector
#idID selector
parent > childDirect child
ancestor descendantAny descendant
el + siblingAdjacent sibling
el ~ siblingsGeneral siblings
[attr='val']Attribute selector
:nth-child(n)nth child
:not(selector)Negation pseudo-class
:is(a,b,c)Matches any
::before / ::afterPseudo-elements
📦Box Model
margin: top right bottom leftShorthand (clockwise)
padding: top right bottom leftInner space
border: width style colorBorder shorthand
box-sizing: border-boxInclude padding in width
width / heightExplicit dimensions
max-width / min-widthConstrain size
overflow: hidden|auto|scrollContent overflow
outlineFocus ring (no layout impact)
⚡Flexbox
display: flexEnable flexbox
flex-direction: row|columnMain axis direction
justify-content: centerAlign on main axis
align-items: centerAlign on cross axis
align-selfOverride for one item
flex-wrap: wrapAllow line wrapping
gap: 16pxSpace between items
flex: 1 1 autogrow shrink basis
order: 2Visual reorder
flex-grow / flex-shrinkIndependent grow/shrink
🔲CSS Grid
display: gridEnable grid
grid-template-columns: 1fr 1frColumn tracks
repeat(3, 1fr)Repeat shorthand
auto-fill / auto-fitResponsive columns
minmax(200px, 1fr)Flexible track sizing
gap: row colRow and column gap
grid-column: span 2Span multiple columns
grid-row: 1 / 3Explicit row placement
place-items: centerAlign both axes
grid-template-areasNamed layout areas
🔠Typography
font-family: 'Name', sansFont stack
font-size: 1.125remSize (prefer rem)
font-weight: 700Weight (100–900)
line-height: 1.6Line spacing (unitless)
letter-spacing: 0.04emCharacter spacing
text-align: left|centerAlignment
text-transform: uppercaseCase transform
text-decoration: underlineDecoration
white-space: nowrapPrevent wrapping
text-overflow: ellipsisTruncate overflow text
font-variant-numericNumber variants
clamp(1rem,2vw,2rem)Fluid font size
🎨Colors & Backgrounds
color: #hex | rgb() | hsl()Text color
background-colorBackground color
background: linear-gradient(...)Gradient background
background-image: url()Image background
background-size: coverCover element
background-position: centerPosition background
opacity: 0.8Element transparency
rgba(0,0,0,0.5)Color with alpha
filter: blur(4px)CSS filter
mix-blend-mode: multiplyBlend mode
backdrop-filter: blur(12px)Frosted glass
📌Positioning & Layout
position: relativeOffset from normal flow
position: absoluteRelative to nearest positioned parent
position: fixedViewport-relative
position: stickyHybrid scroll behavior
top|right|bottom|leftOffset properties
z-index: 10Stack order (needs position)
display: noneHide & remove from flow
visibility: hiddenHide but keep space
transform: translate(x,y)Move without layout impact
✨Transitions & Animation
transition: prop dur easeShorthand
transition-propertyWhich properties to animate
transition-duration: 0.3sHow long
transition-timing-functionEasing: ease|linear|cubic-bezier
@keyframes name {…}Define animation
animation: name dur ease infiniteApply animation
animation-fill-mode: bothKeep final state
will-change: transformGPU layer hint
prefers-reduced-motionAccessibility media query
🔧Custom Properties (Variables)
:root { --color: #6366f1; }Define global variable
color: var(--color)Use variable
var(--color, #fallback)With fallback value
@property --hue { ... }Typed custom property
calc(100% - 2rem)Dynamic calculation
min(val,val) / max(val,val)Clamping utilities
clamp(min,ideal,max)Fluid value
env(safe-area-inset-top)Device environment
📱Responsive Design
@media (max-width: 768px)Mobile breakpoint
@media (min-width: 1024px)Desktop breakpoint
@media (prefers-color-scheme: dark)Dark mode
@media (prefers-reduced-motion)Motion preference
@container (min-width: 400px)Container query
vw / vhViewport units
svh / dvhSmall/dynamic viewport
aspect-ratio: 16/9Aspect ratio property