What does it mean that a CSS property is inherited?

An inherited property passes its computed value to descendant elements unless they set their own. Typography properties like color, font-size and line-height inherit, so setting them on a container affects the text inside. Layout properties like margin and border do not inherit.

What is the initial value of a property?

The initial value is the property's default defined by the CSS specification, used when no author or user style applies and the property does not inherit. It is not the same as the browser's user-agent stylesheet, which may set a different value for a given element.

What does the value syntax notation mean?

It is the CSS formal grammar. A single bar means choose one option, a double bar means the options can appear in any order, curly braces give a repetition count such as one to four values, and a hash means a comma-separated list. Angle brackets denote a value type like length or color.

Why does it matter whether a property is animatable?

Only animatable properties can be smoothly transitioned or keyframed. Properties marked not animatable, such as display, change instantly. Animating layout properties like width can be costly; transform and opacity are cheaper because they avoid layout and paint.

Is this the complete list of CSS properties?

No. It covers the properties you use most often across the box model, flexbox, grid, typography, color, positioning and effects. For the exhaustive list including every experimental and longhand property, consult the official CSS specifications or MDN.

CSS Property Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

CSS has hundreds of properties, and the parts that trip people up are the metadata: does it inherit, what is the initial value, what value syntax is allowed, and can it animate. This reference puts those facts next to each common property so you do not have to guess.

How it works

Every entry records the property’s formal value syntax in CSS grammar notation, its initial value, what elements it applies to, whether it is inherited, the computed value, and whether it can be animated or transitioned. The search box matches the name, description, group, and syntax, and the group selector limits the list to a related set such as Flexbox or Typography.

The value syntax uses standard CSS notation. A single | means one of the options, || means the options may appear in any order, {1,4} is a repetition count, and # denotes a comma-separated list. Types in angle brackets such as <length-percentage> reference value definitions from the spec.

Tips and notes

Inheritance is the quickest win to memorise: most typography properties inherit, most box and layout properties do not.
A unitless line-height (a number) inherits as a multiplier and is almost always better than a fixed length, which inherits as a computed pixel value.
For animation performance, prefer transform and opacity; both are animatable and avoid triggering layout.

This reference covers commonly used properties rather than the entire CSS specification. For exhaustive coverage, follow the spec or MDN links for the property in question.