CSS | Value Integer
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 = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" 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.
Contact Us