CSS <integer> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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