CSS <integer> Data Type

Description

The CSS integer data type is a special type of number that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as:

column-count
counter-increment
grid-column
grid-row
z-index

The syntax for the integer data type is simple: one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single + or - sign. There is no unit associated with integers.

Here are some examples of valid integer values:

Here are some examples of invalid integer values:

10.5
"10"
10px

Note that there is no official range of valid integer values and the specification does not specify a range. However, most browsers will support integers up to a certain limit, typically in the billions or trillions.

Here is an example of how to use the integer data type in CSS:

.container {
  column-count: 3; /* This will create a container with three columns */
}

.item {
  grid-column: 2; /* This will place the item in the second column of the grid */
}

The CSS <integer> data type is a simple but useful data type that can be used in a variety of CSS properties. When using integers, it is important to be aware of the fact that there is no official range of valid values.

Syntax

property: <integer>;

Values

<integer>Consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single + or - sign.

Example

HTML

<div class="test1">-1</div> 

<div class="test2">3</div> 

<div class="test3">2</div> 

<div class="test4">1</div>

CSS

div {
   position: absolute; 
   width: 100px;
   height: 100px; 
   border: 1px solid black; 
   color: white;
}
.test1 {
   left: 15px; 
   top: 15px;
   background-color: red;
   z-index: -1; 
}
.test2 {
   left: 30px; 
   top: 35px;  
   background-color: blue;
   z-index: 3;  
}
.test3 {
   left: 45px; 
   top: 20px; 
   background-color: green; 
   text-align: right; 
   z-index: 2; 
} 
.test4 {
   left: 60px; 
   top: 60px; 
   background-color: sienna; 
   text-align: right; 
   z-index: 1; 
}

Result

Editor