HTML Guide for too many values

CSS: “height”: Too many values or values are not recognized.

The height property in your CSS containing invalid or too many values. The height property should have only one valid length, percentage, or keyword value.

Valid Values for height Property:

Length values: px, em, rem, etc. (e.g., 100px, 10em)
Percentage values: (e.g., 50%)
Keyword values: auto, max-content, min-content, fit-content, inherit, initial, unset

Example of Incorrect Usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .example {
      height: 100px 50px; /* Incorrect: Too many values */
    }
  </style>
  <title>Height Property Example</title>
</head>
<body>
  <div class="example">Content</div>
</body>
</html>

Example of Correct Usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .example {
      height: 100px; /* Correct: One valid value */
    }
  </style>
  <title>Height Property Example</title>
</head>
<body>
  <div class="example">Content</div>
</body>
</html>

CSS: X: Too many values or values are not recognized.

A CSS validation error about “Too many values or values are not recognized” indicates that a CSS property in your HTML uses an invalid or unsupported value, or has more values than expected.

CSS properties have strict rules regarding which values and how many values they accept. Using an unsupported keyword, a typo, or an extra value will result in validation errors. For example, the color property only accepts valid color values (like red, #f00, rgb(255,0,0)), but not unrelated keywords. Similarly, margin can accept one to four length or percentage values, but adding a fifth value or invalid text will cause an error.

Example of INVALID CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Invalid CSS Example</title>
    <style>
      p {
        color: red blue;      /* Too many values */
        margin: 10px 20px 5px 0px 15px; /* Too many values */
        display: blocky;      /* Unrecognized value */
      }
    </style>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Example of VALID CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Valid CSS Example</title>
    <style>
      p {
        color: red;
        margin: 10px 20px 5px 0px;
        display: block;
      }
    </style>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Check each CSS property for correct spelling, valid values, and valid value count.