Open In App

CSS | Value Integer

Improve
Improve
Like Article
Like
Save
Share
Report

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.
 



Last Updated : 12 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads