|$ curl https://forge-ai.dev/api/markdown?path=docs/css/properties

$cat docs/complete-css-property-reference.md

updated Today·50 min read·published

Complete CSS Property Reference

◆CSS◆Properties◆Reference◆All Levels🎯Free Tools

Introduction

A complete CSS property encyclopedia matters because layout, cascade, and visual design are contracts between authors, browsers, and AI agents. Every property encodes a default, an inheritance rule, and a value space. Guessing from muscle memory leaves gaps; a systematic reference closes them.

For humans, this page is a field guide: pick the right property, know whether it inherits, and avoid fighting the cascade. For AI agents crawling ForgeLearn via ?format=md or Accept: text/markdown, it is a structured inventory of major CSS properties with values, defaults, inheritance, and notes — so generated stylesheets stay intentional rather than !important-patched soup.

Pair this encyclopedia with the How to Master CSS curriculum and deep topic pages linked throughout. Tables use five columns: Property, Values, Default, Inherited, Notes.

ℹ

info

Prefer the lowest-specificity fix that expresses intent. If @layer or source order can win, do not escalate to IDs or !important.

How to Read Each Entry

Column	Meaning
Property	CSS property or related descriptor name.
Values	Common keywords, data types, or representative syntax.
Default	Initial value when not specified (simplified).
Inherited	Whether the computed value inherits to descendants.
Notes	When to use it, gotchas, and related ForgeLearn topics.

📝

note

Defaults and inheritance follow CSS specs but are summarized for teaching. Always verify edge cases (e.g. some properties inherit only through certain display types) on complex pages.

Cascade & Inheritance

Control how values resolve when multiple rules compete, and which properties flow to children. See also Cascade, Inheritance, and Cascade Layers.

Property	Values	Default	Inherited	Notes
all	initial \| inherit \| unset \| revert \| revert-layer	—	n/a	Resets all properties except direction/unicode-bidi (with caveats).
inherit	keyword on any property	—	n/a	Forces inheritance of parent computed value.
initial	keyword on any property	—	n/a	Sets property to its initial (spec) value.
unset	keyword on any property	—	n/a	inherit if inherited property, else initial.
revert	keyword on any property	—	n/a	Rolls back to user-agent / previous origin cascade.
revert-layer	keyword on any property	—	n/a	Rolls back to previous cascade layer.

cascade-keywords.css

CSS

1	:where(.prose) {
2	color: unset; /* inherit from parent if color inherits */
3	}
4	.modal {
5	all: initial; /* nuclear — usually prefer revert-layer */
6	}
7	.btn {
8	color: revert-layer; /* undo this layer only */
9	}

Box Model & Sizing

Content, padding, border, margin, and sizing keywords. Prefer border-box globally. Deep dive: Box Model, Sizing, Spacing.

Property	Values	Default	Inherited	Notes
box-sizing	content-box \| border-box	content-box	No	border-box includes padding+border in width/height.
width / height	<length-percentage> \| auto \| min-content \| max-content \| fit-content \| stretch	auto	No	Prefer logical inline-size / block-size for i18n.
min-width / max-width	same + none (max)	auto / none	No	Clamp flex/grid items; prevent overflow.
min-height / max-height	same + none (max)	auto / none	No	Useful for sticky footers and cards.
aspect-ratio	auto \| <ratio>	auto	No	Reserve space for media to reduce CLS.
padding	1–4 <length-percentage>	0	No	Also padding-block / padding-inline shorthands.
margin	1–4 <length-percentage> \| auto	0	No	Vertical margins collapse between blocks.
margin-trim	none \| block \| inline \| …	none	No	Newer: trim margins at container edges.

preview

Display & Layout (Flex / Grid)

Display types and key Flexbox/Grid properties. Deep dives: Flexbox, Grid, Subgrid, Display.

Property	Values	Default	Inherited	Notes
display	block \| inline \| flex \| grid \| none \| contents \| flow-root \| …	inline*	No	*element-dependent; sets outer/inner display.
flex-direction	row \| row-reverse \| column \| column-reverse	row	No	Defines main axis.
flex-wrap	nowrap \| wrap \| wrap-reverse	nowrap	No	Allow multi-line flex containers.
justify-content	start \| end \| center \| space-between \| space-around \| space-evenly \| …	normal	No	Main-axis distribution.
align-items	stretch \| start \| end \| center \| baseline \| …	normal	No	Cross-axis alignment of items.
align-content	same + space-*	normal	No	Multi-line cross-axis packing.
gap	<length-percentage>{1,2}	normal	No	Preferred over margin hacks between siblings.
flex	none \| auto \| <grow> <shrink> <basis>	0 1 auto	No	Shorthand for grow/shrink/basis.
grid-template-columns	none \| <track-list> \| subgrid	none	No	fr, minmax, repeat(auto-fit/fill).
grid-template-rows	none \| <track-list> \| subgrid	none	No	Subgrid inherits parent tracks.
grid-template-areas	none \| <string>+	none	No	Named areas for readable layouts.
grid-column / grid-row	<line> / <line> \| span n	auto	No	Place items on lines.
place-items	<align> <justify>?	normal	No	Shorthand align-items + justify-items.

flex-grid-key.css

CSS

1	.nav { display: flex; align-items: center; gap: 1rem; }
2	.cards {
3	display: grid;
4	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
5	gap: 1rem;
6	}
7	.child { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }

preview

Positioning

Position schemes and insets. Prefer logical inset properties. See Positioning and Z-Index.

Property	Values	Default	Inherited	Notes
position	static \| relative \| absolute \| fixed \| sticky	static	No	sticky needs threshold inset.
top/right/bottom/left	<length-percentage> \| auto	auto	No	Prefer inset-* logical forms.
inset	1–4 values	auto	No	Physical shorthand for all sides.
inset-block / inset-inline	1–2 values	auto	No	Writing-mode aware.
z-index	auto \| <integer>	auto	No	Only within a stacking context.
isolation	auto \| isolate	auto	No	Creates stacking context cleanly.

Typography

Font and type metrics. See Typography and Fonts.

Property	Values	Default	Inherited	Notes
font-family	<family-name> \| <generic>	UA dependent	Yes	Always provide fallbacks.
font-size	<length-percentage> \| absolute/relative keywords	medium	Yes	Prefer rem + clamp for fluid type.
font-weight	normal \| bold \| 100–900 \| bolder \| lighter	normal	Yes	Variable fonts accept any number in range.
font-style	normal \| italic \| oblique <angle>?	normal	Yes	Prefer real italic faces when available.
line-height	normal \| <number> \| <length-percentage>	normal	Yes	Unitless numbers scale with font-size.
font	shorthand	see longhands	Yes	Order: style variant weight size/line-height family.
font-display	@font-face descriptor	auto	n/a	swap/optional for performance.
font-variation-settings	normal \| "wght" n …	normal	Yes	Low-level variable font axes.

Text

Property	Values	Default	Inherited	Notes
color	<color>	UA dependent	Yes	CurrentColor keyword used by many props.
text-align	start \| end \| left \| right \| center \| justify	start	Yes	Prefer start/end for RTL.
text-decoration	shorthand line/style/color/thickness	none	No	underline/over/line-through.
text-transform	none \| capitalize \| uppercase \| lowercase	none	Yes	Accessibility: do not rely on case alone.
letter-spacing	normal \| <length>	normal	Yes	Slight tracking for headings.
word-break	normal \| break-all \| keep-all \| break-word	normal	Yes	Handle long URLs carefully.
white-space	normal \| nowrap \| pre \| pre-wrap \| pre-line \| break-spaces	normal	Yes	pre preserves whitespace.
text-overflow	clip \| ellipsis \| <string>	clip	No	Needs overflow hidden + nowrap usually.
line-clamp	none \| <integer> (via -webkit-line-clamp)	none	No	See Overflow topic for patterns.
hyphens	none \| manual \| auto	manual	Yes	Needs lang attribute for quality.

Colors & Backgrounds

Modern color spaces and background layers. See Colors, Backgrounds, Gradients, color-mix().

Property	Values	Default	Inherited	Notes
color	<color>	UA	Yes	oklch/oklab preferred for perceptual uniformity.
opacity	<number> 0–1	1	No	Affects entire element including children.
background-color	<color>	transparent	No	Separate from background-image.
background-image	none \| <image>#	none	No	Gradients are images.
background-size	auto \| cover \| contain \| <length-percentage>{1,2}	auto	No	cover may crop; contain may letterbox.
background-position	<position>	0% 0%	No	Logical positions evolving.
background-repeat	repeat \| no-repeat \| space \| round \| …	repeat	No	Commonly no-repeat for heroes.
background	shorthand	see longhands	No	Layers comma-separated; color last.
color-scheme	normal \| light \| dark \| only …	normal	Yes	Hints UA form controls.

modern-color.css

CSS

1	.chip {
2	background: color-mix(in oklch, var(--brand) 70%, black);
3	color: oklch(95% 0.02 250);
4	}

Borders, Outlines & Radius

Property	Values	Default	Inherited	Notes
border	width style color	medium none currentColor	No	Shorthand; logical border-block/inline exist.
border-radius	1–4 lengths / optional /	0	No	Percentages relative to box.
outline	width style color	medium invert/auto	No	Does not affect layout; use for focus.
outline-offset	<length>	0	No	Separate focus ring from edge.
box-shadow	none \| inset? offsets blur spread color	none	No	Multiple shadows comma-separated.

✓

best practice

Do not remove outlines without a visible :focus-visible replacement.

Transforms

Property	Values	Default	Inherited	Notes
transform	none \| <transform-list>	none	No	Compositor-friendly; prefer over top/left.
transform-origin	<position>	50% 50%	No	Pivot point.
transform-style	flat \| preserve-3d	flat	No	3D nested contexts.
perspective	none \| <length>	none	No	On parent for 3D children.
backface-visibility	visible \| hidden	visible	No	Card flip UIs.
translate / rotate / scale	individual transform props	none	No	Independent; animate separately.

preview

Transitions & Animations

Property	Values	Default	Inherited	Notes
transition-property	none \| all \| <property>#	all	No	List discrete props you intend to animate.
transition-duration	<time>#	0s	No	Keep UI motion under ~300ms usually.
transition-timing-function	ease \| linear \| cubic-bezier() \| steps()	ease	No	ease-out for exits often feels better.
transition-delay	<time>#	0s	No	Stagger carefully for a11y.
animation-name	none \| <keyframes>#	none	No	Matches @keyframes.
animation-duration	<time>#	0s	No	Required for visible animation.
animation-iteration-count	infinite \| <number>	1	No	Loaders use infinite.
animation-fill-mode	none \| forwards \| backwards \| both	none	No	forwards keeps end state.
animation-timeline	auto \| scroll() \| view() \| <timeline>	auto	No	Scroll-driven animations.

⚠

warning

Always provide prefers-reduced-motion fallbacks for non-essential animation.

Filters & Effects

Property	Values	Default	Inherited	Notes
filter	none \| blur() brightness() …	none	No	Can create containing/stacking effects.
backdrop-filter	none \| <filter-function>#	none	No	Frosted glass; needs semi-transparent bg.
mix-blend-mode	normal \| multiply \| screen \| …	normal	No	Blends with backdrop.
isolation	auto \| isolate	auto	No	Limit blend groups.
clip-path	none \| <clip-source> \| <geometry>	none	No	polygon/circle/path.
mask-image	none \| <image>#	none	No	Alpha or luminance masks.

Scroll

Property	Values	Default	Inherited	Notes
overflow	visible \| hidden \| clip \| scroll \| auto	visible	No	Also overflow-x/y / -inline/block.
overflow-wrap	normal \| break-word \| anywhere	normal	Yes	Formerly word-wrap.
overscroll-behavior	auto \| contain \| none	auto	No	Prevent scroll chaining.
scroll-snap-type	none \| x/y/both mandatory/proximity	none	No	Carousel patterns.
scroll-snap-align	none \| start \| end \| center	none	No	On snap children.
scroll-margin	<length>{1,4}	0	No	Offset for sticky headers + scrollIntoView.
scrollbar-gutter	auto \| stable \| stable both-edges	auto	No	Reserve gutter to avoid layout shift.
scrollbar-width	auto \| thin \| none	auto	No	Limited styling; respect a11y.
scroll-timeline / view-timeline	timeline names	none	No	Drive animation-timeline.

UI (Cursor, Resize, Appearance)

Property	Values	Default	Inherited	Notes
cursor	auto \| pointer \| not-allowed \| grab \| …	auto	Yes	pointer for buttons/links affordance.
resize	none \| both \| horizontal \| vertical	none	No	Needs overflow not visible.
appearance	none \| auto \| …	auto	No	Reset native controls carefully.
caret-color	auto \| <color>	auto	Yes	Input caret.
accent-color	auto \| <color>	auto	Yes	Checkboxes/radios/range.
pointer-events	auto \| none	auto	Yes	none disables hit-testing.
user-select	auto \| none \| text \| all	auto	No	Avoid disabling selection globally.
touch-action	auto \| none \| pan-x \| pan-y \| manipulation \| …	auto	Yes	Gesture control.

Logical Properties Map

Physical → logical mapping for LTR horizontal-tb writing mode (default). In RTL, inline-start becomes the right side. Full guide: Logical Properties.

Physical	Logical	Default	Inherited	Notes
width	inline-size	auto	No	Horizontal measure in horizontal-tb.
height	block-size	auto	No	Vertical measure in horizontal-tb.
margin-left / right	margin-inline-start / end	0	No	Flips in RTL.
margin-top / bottom	margin-block-start / end	0	No	Follows block flow.
padding-left / right	padding-inline-start / end	0	No	Same pattern for borders.
top / bottom	inset-block-start / end	auto	No	Positioning insets.
left / right	inset-inline-start / end	auto	No	Prefer over left/right.
border-*-left	border-*-inline-start	medium	No	Border longhands exist per side.
text-align: left	text-align: start	start	Yes	start/end are flow-relative.

logical.css

CSS

1	.media {
2	margin-inline-start: 1rem;
3	padding-block: 0.5rem 1rem;
4	border-inline-start: 3px solid var(--brand);
5	inset-inline-end: 0;
6	}

Media & Container Query Features

Feature	Values	Default	Inherited	Notes
width / min-width / max-width	<length>	—	n/a	@media viewport size.
prefers-color-scheme	light \| dark	—	n/a	System theme preference.
prefers-reduced-motion	no-preference \| reduce	—	n/a	Mandatory for motion a11y.
prefers-contrast	no-preference \| more \| less	—	n/a	Increase contrast when more.
forced-colors	none \| active	—	n/a	Windows High Contrast etc.
hover / pointer	hover/none · fine/coarse	—	n/a	Input capability queries.
container-type	normal \| size \| inline-size	normal	No	Establishes query container.
@container	name? (condition)	—	n/a	Style by container size.
cqw / cqi / …	container query units	—	n/a	1% of container dimension.

Modern: @layer, @property, View Timelines

Architectural and Houdini-adjacent features. See Cascade Layers, @property, Scroll Animations, View Transitions, @scope.

Feature	Values	Default	Inherited	Notes
@layer	name order \| block	—	n/a	Later layers beat earlier regardless of specificity.
@property	syntax / inherits / initial-value	—	n/a	Typed custom props; animatable.
@scope	(root) to (limit)	—	n/a	Proximity-based style isolation.
view-transition-name	none \| <custom-ident>	none	No	Named VT elements must be unique.
view-timeline-name	none \| <dashed-ident>	none	No	Progress as element enters view.
animation-range	normal \| <length-percentage>…	normal	No	Trim scroll-driven ranges.
anchor-name / position-anchor	none \| <dashed-ident>	none	No	Anchor positioning API.

modern-at-rules.css

CSS

1	@layer reset, tokens, components, utilities;
2
3	@property --hue {
4	syntax: "<number>";
5	inherits: true;
6	initial-value: 210;
7	}
8
9	@scope (.card) {
10	:scope { padding: 1rem; }
11	title { font-weight: 600; }
12	}
13
14	.hero { view-transition-name: hero; }

🔥

pro tip

Unlayered styles beat all layers. Keep app overrides unlayered or in the highest intentional layer — document the strategy.

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor