font-family background-size

CSS Top Properties Comma■separated stack: 'Inter', system-ui, sans-serif cover | contain | <length> <length>
Cheatsheet font-size background-position
px | rem | em | clamp() for fluid type center | top left | x y
display
font-weight background-repeat
block | inline | inline-block | flex | grid | none
100..900 | normal | bold no-repeat | repeat-x | repeat-y
position
line-height background-attachment
static | relative | absolute | fixed | sticky
unitless recommended, e.g., 1.5 scroll | fixed | local
top/right/bottom/left
font-style background
Offsets for positioned elements (e.g., top:10px)
normal | italic | oblique Shorthand for bg properties
z-index
letter-spacing border
Stacking order for positioned elements
tracking; e.g., 0.02em e.g., 1px solid #ddd; shorthand
float / clear
word-spacing border-width/style/color
Legacy layout (avoid when possible)
space between words Individual control
box-sizing
text-align border-radius
content-box | border-box (prefer border-box)
left | right | center | justify e.g., 8px; ellipse: 8px/12px; logical corners
overflow
text-transform outline
visible | hidden | scroll | auto; also x/y variants
none | uppercase | lowercase | capitalize Like border but doesn’t affect layout
visibility
text-decoration outline-offset
visible | hidden | collapse
underline | line-through; plus-thickness/color Gap between outline and element
opacity
text-overflow box-shadow
0..1 (transparency)
ellipsis (with overflow:hidden; white-space:nowrap) offset-x offset-y blur spread color
margin
white-space filter
Shorthand: margin: top right bottom left; can be auto
normal | nowrap | pre | pre-wrap | pre-line blur(), brightness(), contrast(), drop-shadow()
padding
font-variant backdrop-filter
Shorthand: padding: top right bottom left
small-caps, tabular-nums, etc. Blur/filters behind the element
width/height
hyphens mix-blend-mode
px | % | vw/vh | auto | min-/max-width/height
auto | manual | none (needs lang=) multiply | screen | overlay | ...
min-width/min-height
color isolation
Set lower bounds
Text color (supports var(), rgb(), hsl()) isolate to start new stacking context
max-width/max-height
background-color transform
Set upper bounds
Element background color translate/scale/rotate/skew; 3D variants
aspect-ratio
background-image transform-origin
<width>/<height> e.g., 16/9
url(), gradients Pivot point for transforms
transition gap table-layout
property duration timing-function delay row/column gaps; works for flex and grid auto | fixed
transition-property order border-collapse
all | opacity, transform, ... Reorder item visually collapse | separate; border-spacing
transition-duration align-self list-style
e.g., .3s; use prefers-reduced-motion Override align-items for a single item type position image
animation display:grid/inline-grid list-style-type
name duration timing count direction fill Enable grid layout disc | decimal | none | ...
animation-name/keyframes grid-template-columns appearance
@keyframes spin { to { transform: rotate(1turn) } } e.g., repeat(12, 1fr) | subgrid none to remove native styling
animation-duration/timing grid-template-rows accent-color
e.g., 1s ease-in-out Define row tracks Set checkbox/radio color
scroll-behavior grid-template-areas resize
auto | smooth Named template regions none | both | horizontal | vertical (textarea)
scroll-margin/scroll-padding grid-auto-columns/rows caret-color
Offsets for scroll snapping/anchoring Size of implicit tracks Insert cursor color
scroll-snap-type grid-auto-flow ::placeholder
x | y | both mandatory | proximity row | column | dense Style placeholder text
scroll-snap-align grid-column/row outline-color/style/width
start | center | end Start / end lines: 1 / -1 to span all Accessible focus styles
flex place-items @media
shorthand: flex-grow flex-shrink flex-basis align-items + justify-items shorthand Queries: width, prefers-color-scheme, motion
flex-direction place-content @supports
row | row-reverse | column | column-reverse align-content + justify-content Feature queries for progressive enhancement
flex-wrap place-self @container
nowrap | wrap | wrap-reverse align-self + justify-self Container queries by size/style/state
flex-flow object-fit contain
shorthand: direction wrap fill | contain | cover | none | scale-down layout | paint | size | content
justify-content object-position will-change
flex-start | center | space-between | ... Focus point: 50% 50%, 20% 30% Hint for upcoming changes (use sparingly)
align-items image-rendering calc()
stretch | center | start | end | baseline pixelated | crisp-edges | auto Dynamic expressions: calc(100% - 2rem)
align-content cursor min()/max()/clamp()
space-between | center | ... (multi-row) pointer | not-allowed | grab | ... Fluid sizing: clamp(1rem, 2vw, 2rem)
variables (custom properties)
--brand: #0af; color: var(--brand)
logical props
margin-inline, padding-block, inset, etc.
@page
Page size/margins for print
page-break-* / break-*
Avoid/force breaks: break-inside: avoid
pointer-events
none | auto
aria-* (HTML) & :focus-visible
Accessible interactions (CSS pseudo-class)