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.

What is the CSS Property Reference?

Comprehensive CSS property reference with formal value syntax, initial value, applies-to, inherited status, computed value and whether the property animates, grouped by box model, flexbox, grid and more. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Property Reference

Name: CSS Property Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Inheritance: what passes down and what does not

Inheritance is one of the most practically useful things to understand in CSS. A surprising number of bugs come from expecting a property to inherit when it does not, or forgetting that it does.

Properties that inherit (partial list):

All typography: color, font-family, font-size, font-weight, line-height, letter-spacing, text-align, text-transform
List: list-style, list-style-type
Table: border-collapse, border-spacing
User interface: cursor, visibility, pointer-events

Properties that do not inherit (partial list):

Box model: margin, padding, border, width, height
Background: background, background-color
Layout: display, position, flex, grid
Box shadows and transforms

When you need a non-inherited property to pick up a parent’s value, use the inherit keyword explicitly: border: inherit.

Initial values worth knowing

The initial keyword resets a property to its specification default, which is not always the same as the browser’s default stylesheet:

display initial = inline, but browsers set block elements to block via their user-agent stylesheet
position initial = static
z-index initial = auto
opacity initial = 1
visibility initial = visible
border-width initial = medium

Animatable vs not

Properties marked animatable can be smoothly transitioned between values. Properties marked not animatable switch instantly — adding a transition on display does nothing. Key distinctions:

Animatable: opacity, transform, color, background-color, width, height, margin, padding, font-size, border-radius, box-shadow
Not animatable: display, visibility (though it has a special snap behaviour), position, overflow, content

For animation performance, transform and opacity are the most efficient: they run on the compositor thread and do not trigger layout or paint recalculation. Animating width, height, or margin triggers a full layout pass each frame, which is expensive on large DOMs.

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.