CSS Reference Data Type

<number>

The <number> CSS data type represents a number. A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Real numbers may be preceded by a “-” (negative) or “+” (positive) to indicate the sign. -0 is equivalent to 0 and is not a negative number. Examples of numbers are 3, 1.86, -400.

A lot of CSS properties take numerical values, some are associated with a unit to indicate another data type such as a <length>, e.g 25px, others are not, such as z-index which takes an <integer> value. Integers are a subset of numbers.

Notes and Trivia

Real numbers and integers are specified in decimal notation only. Which means that 3/4 is not a valid number notation in CSS, nor are square roots and other non-decimal notations. The speed at which a transition takes place is specified using a CSS timing function.

Transitioning <number>s

Integers in CSS are transitionable. They are interpolated as real numbers to allow animations.

Note that even though numbers as a value as transitionable, this does not mean that any property that takes a number as a value is animatable. Some properties, such as the z-index property, take number values, but are not animatable. For a list of animatable properties, refer to this list and this list in the CSS Transitions specification.

Examples

The following are all valid numbers: -3, 9.999999, -17.5, 443, -90, 20000, 55.8765, -0.3, 0.

The following are invalid values for numbers: 2.4.9 (only one decimal point is allowed), --+35 (only one leading sign is allowed).

Browser Support

Number values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by

Last updated March 6, 2016 at 3:29 am by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.