CSS | Value Integer
Last Updated :
12 Oct, 2021
CSS data type integer represents <integer > .It is a whole number which can be positive(+) or negative(-) .Integer contains one or more than one digits between 0-9.No decimal value is allowed .
No units are required to represent an integer value. A lot of CSS properties take integer value like z-index, line-height, column-count, counter-increment, grid-column, etc.
Valid Integer
1, 29, 047, +67, +9086, -9821, -32
Invalid Integer
1.08, -9.86, 9.9t, 4/3
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< style >
.gfg {
column-count: 3;
}
</ style >
</ head >
< body >
< h1 >CSS Value Integer</ h1 >
< div class = "gfg" >
CSS data type integer represents
< strong >< integer > </ strong >.
It is a whole number which can be positive(+)
or negative(-) .Integer contains one or more
than one digits between 0-9.No decimal value
is allowed . No units
are required to represent an integer value.
A lot of CSS properties take integer value
like z-index, line-height, column-count,
counter-increment, grid-column etc.
</ div >
</ body >
</ html >
|
Output
In this example column-count takes input an integer.
Example 2:
html
<!DOCTYPE html>
< html >
< head >
< style >
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</ style >
</ head >
< body >
< h1 >The z-index Property</ h1 >
< img src =
width = "100" height = "140" />
</ body >
</ html >
|
Output
In this example z-index takes input an integer.Because the image has a z-index of -1, it will be placed behind the heading.
Share your thoughts in the comments
Please Login to comment...