Cheat Sheets

CSS3 Cheat Sheet

Quick reference for CSS3 — selectors, box model, flexbox, grid, animations, variables, and more. Everything you need to style the web.

SQL Python Power BI DAX M Code Microsoft Fabric Snowflake Databricks Git VS Code Vim Homebrew HTML CSS3 JSON Java JavaScript AI Prompts Markdown Data Warehouse

Select. Style. Animate.

Tap for definition · Hold to copyHover for definition · Click to copy

Basic Selectors

UniversalTypeClassIDGroupChainingType + ID

Combinators

DescendantDirect childAdjacent siblingGeneral sibling

Attribute Selectors

Has attributeExact valueStarts withEnds withContainsWord matchPrefix

Pseudo-classes

:link:visited:hover:active:focus:not():root:target:empty:lang()

Structural Pseudo-classes

:first-child:last-child:nth-child():nth-last-child():first-of-type:last-of-type:nth-of-type():nth-last-of-type():only-child:only-of-type

Input Pseudo-classes

:checked:disabled:enabled:required:optional:valid:invalid:in-range:out-of-range:read-only:read-write:indeterminate

Pseudo-elements

::before::after::first-letter::first-line::selection::placeholder

Colors

NamedHexHex + alphargb()rgba()hsl()hsla()currentcolortransparent

Backgrounds

ColorImageGradientRadial gradientPositionSizeRepeatAttachmentClipShorthand

Typography

font-familyfont-sizefont-weightfont-styleline-heightletter-spacingword-spacingtext-aligntext-decorationtext-transformtext-indentwhite-spacefont shorthand@font-face

Box Model

width / heightmax-widthmin-widthmax-height / min-heightpaddingmarginborderborder-radiusbox-sizingoverflowvisibilitydisplayoutlinebox-shadow

Positioning

position: staticposition: relativeposition: absoluteposition: fixedposition: stickyz-indextop / right / bottom / left

Flexbox — Container

Enable flexflex-directionflex-wrapjustify-contentalign-itemsalign-contentgapflex-flow

Flexbox — Items

flex-growflex-shrinkflex-basisflex shorthandalign-selforder

Grid — Container

Enable gridgrid-template-columnsgrid-template-rowsgrid-template-areasgapjustify-itemsalign-itemsjustify-contentalign-contentrepeat()minmax()auto-fill / auto-fit

Grid — Items

grid-columngrid-rowgrid-areagrid-area (manual)justify-selfalign-self

Transitions

transitiontransition-propertytransition-durationtransition-timing-functiontransition-delay

Animations

@keyframesanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-stateanimation shorthand

Transforms

translatetranslateX / Yscalerotateskewtransform-originMultiple transforms

CSS Variables

Define variableUse variableWith fallbackLocal scopeUpdate via JS

Responsive & Media Queries

Media queryMin-widthOrientationDark modeReduced motionPrintViewport units

Miscellaneous

opacitycursorpointer-eventsuser-selectscroll-behaviorobject-fitaspect-ratioclip-pathfilter!important