CSS Data Type - <integer>

The CSS data type <integer> is a unique type of <number> that denotes a positive or negative whole number. Many CSS properties and descriptors use this data type, such as column-count, counter-increment, grid-column, grid-row, and z-index properties along with range descriptor.

Syntax

The data type <integer> consists of one or many decimal digits, including 0 through 9. It may be optionally preceded with a + or - sign. No unit is associated with integers.

Note: No official range of valid <integer> values.

/* Valid integers */
123         /* Positive integer without a + sign */

+123        /* Positive integer with a + sign */

-123        /* Negative integer */

0           /* Zero */

+0          /* Zero with + sign */

-0          /* Zero with - sign */

/*Invalid integers */
123.0        /* This is a <number>, not an <integer> */

123.         /* Decimal points are not allowed */

+--123       /* Only one leading +/- is allowed */

twenty       /* Letters are not allowed */

_2           /* Special characters like underscore are not allowed */

\35          /* Escaped Unicode characters are not allowed, even if they are an integer (here: 5) */

3e4          /* Scientific notation is not allowed */

CSS <integer> - Used With column-count

The following example demonstrates the use of <integer> data type to define the number of columns in the CSS property column-count:

<html>
<head>
<style> 
   .multicol-col-count {
      column-count: 3;
   }
</style>
</head>
<body>
   <h1>column-count Property</h1>

   <div>
   <p class="multicol-col-count">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </p>
   </div>
</body>
</html>

CSS <integer> - Used With grid-template-columns

The following example demonstrates the use of <integer> data type to define the number of columns in the CSS property grid-template-columns:

<html>
<head>
<style>
   .grid {
      display: grid;
      height: 50px;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 50px;
   }

   .col1 {
      background-color: aqua;
      border: 2px dashed black;
   }

   .col2 {
      background-color: lightgreen;
      grid-column: 2 / 4;
      border: 2px dashed black;
   }

   .col3 {
      background-color: teal;
      grid-column: span 2 / 7;
      border: 2px dashed black;
   }
</style>
</head>
<body>
   <div class="grid">
      <div class="col1"></div>
      <div class="col2"></div>
      <div class="col3"></div>
    </div>
</body>
</html>
Advertisements