CSS Data Type - <number>

CSS <number> data type represents a scalar value, typically used for numerical quantities. It is a generic term for any numerical value and can include integers, decimals, negative numbers, and scientific notation.

CSS <number> - Valid Syntax

Following is the list of valid numbers:

Number	Description
21	A raw <integer> is also a <number>.
3.03	Positive Fraction
-264.22	Negative Fraction
0.0	Zero
+0.0	Zero, with a leading +.
-0.0	Zero, with a leading -.
.55	Fractional number without a leading zero.
11e6	Scientific notation.
-5.3e-4	Complicated scientific notation.

CSS <number> - Invalid Syntax

Following is the list of invalid numbers:

Number	Description
32.	At least one digit must follow a decimal point.
+-45.2	There can be only one leading +/-.
14.5.6	There can be just one decimal place.

CSS <number> - Check Valid/Invalid

In the following example, enter the value and check if the entered number is valid or invalid

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
      text-align: center;
   }
   h1 {
      color: #333;
   }
   #input {
      padding: 10px;
      margin: 20px;
      font-size: 16px;
   }
   #result {
      font-size: 18px;
      margin-top: 10px;
   }
   .valid {
      color: green;
   }
   .invalid {
      color: red;
   }
   #submitBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>Enter the number to check if it is valid or invalid</h1>
<label for="input">Enter a number:</label>
<input type="text" id="input" placeholder="Enter a number">
<button id="submitBtn" onclick="checkNumberValidity()">Submit</button>
<div id="result"></div>
<script>
   function checkNumberValidity() {
      const inputElement = document.getElementById('input');
      const resultElement = document.getElementById('result');
      const inputValue = inputElement.value.trim();
      // Regular expression for validating numbers
      const numberRegex = /^([+-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?|[+-]?Infinity)$/;
      if (numberRegex.test(inputValue)) {
         resultElement.textContent = 'Valid Number';
         resultElement.className = 'valid';
      } 
      else {
         resultElement.textContent = 'Invalid Number';
         resultElement.className = 'invalid';
      }
   }
</script>
</body>
</html>

CSS <number> - cubic-bezier() Function

The <number> datatype is used in the cubic-bezier() function in the following example to specify control points along a Cubic-Bézier curve.

The x and y coordinates of these control points are determined by the four <number> values, which range from 0 to 1, and they influence the transition effect's acceleration and timing.

<html>
<head>
<style>
   .number {
      transition-property: font-size, color;
      transition-duration: 1.5s;
      font-size: 24px;
      color: blue;
      margin: 10px;
      padding: 10px;
      display: inline-block;
      transition-timing-function: cubic-bezier(.17, .67, .83, .67);
   }
   .number:hover {
      font-size: 36px;
      color: red;
   }
</style>
</head>
<body>
<span class="number">Hover over this text!</span>
</body>
</html>