CSS <integer> Data Type

The CSS <integer> data type represents a whole number with no fractional component. Integer values can be positive, negative, or zero, although individual CSS properties may restrict the range of integers they accept.

Syntax

An <integer> consists of one or more decimal digits and can optionally begin with a plus (+) or minus (-) sign:

An integer does not contain a decimal point or fractional component.

Positive and Negative Integers

The <integer> data type itself allows positive values, negative values, and zero. However, the CSS feature using the integer can impose additional restrictions.

Value	Description
`10`	Positive integer
`+10`	Positive integer with an explicit plus sign
`0`	Zero
`-10`	Negative integer

For example, one property may accept any integer while another may require a value greater than or equal to zero.

Integers and Numbers

The <integer> data type is more restrictive than the <number> data type. An integer cannot contain a fractional part, while a number can represent both whole and fractional values.

Value	`<integer>`	`<number>`
`5`	Valid	Valid
`-3`	Valid	Valid
`2.5`	Not valid	Valid
`-0.75`	Not valid	Valid

<integer> Examples

Integer values are used by CSS features that require whole-number values. For example, z-index uses an integer to control the stack level of a positioned element:

.front {
  position: relative;
  z-index: 10;
}
.back {
  position: relative;
  z-index: -1;
}

Other CSS features can restrict an integer to a particular range. For example, column-count accepts a positive integer when a numeric column count is specified:

.columns {
  column-count: 3;
}

The <integer> data type is used by many CSS properties, including:

Specifications

The <integer> data type is defined in the CSS Values and Units Module Level 4 .

CSS <integer> Data Type