CSS Property Lookup

What this tool is used for

• Looking up a property's syntax and initial value.
• Checking whether a property is inherited.
• Finding the common values for a property you use rarely.
• Confirming a property name's spelling before it fails silently in a stylesheet.
• Reading what a property does before using it.

Frequently Asked Questions

What does the initial value column tell me?

What the property is before any stylesheet touches it — not what your browser's default stylesheet sets. `display` has an initial value of `inline`, yet a `<div>` shows as block because the UA stylesheet says so.

Why does it matter whether a property inherits?

Inherited properties — colour, font, `visibility`, most typography — pass to descendants automatically, so setting them once on a container is enough. Non-inherited ones such as `border` or `padding` must be set on each element, or reset with `inherit`.

How do I read the syntax column?

It is the value grammar: `|` separates alternatives, angle brackets name a value type such as `<length>` or `<percentage>`, and a keyword stands for itself. It shows what the property will accept, not which browsers accept it.

What is the difference between visibility: hidden and display: none?

`visibility: hidden` keeps the element's box, so the layout does not shift and the space stays reserved. `display: none` removes it from the layout entirely. Both hide the element from screen readers.

Why is box-sizing worth setting globally?

Because `content-box` — the initial value — excludes padding and border from a declared width, so a 200px box with 20px padding occupies 240px. Setting `border-box` everywhere makes a declared width the total width, which is what most layout code assumes.

Does this cover every CSS property?

No — it covers the ones in daily use, grouped by area. For exhaustive coverage including browser support tables and edge-case grammar, the MDN reference and the specifications themselves remain the authority.

Common errors and gotchas

• Assuming a property is supported, since a reference lists syntax rather than browser support.
• Overlooking whether a property is inherited, which changes how a change propagates.
• Confusing a shorthand with its longhands, where the shorthand resets the ones you omit.
• Assuming the initial value is what you see, when a browser stylesheet may set something else.
• Using a property in a context where it has no effect, such as width on an inline element.