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

Every CSS property has a defined value syntax that specifies exactly which values it accepts and how many. When the validator encounters a declaration that doesn’t match this syntax, it flags the error. This can happen for several distinct reasons:

• Too many values: A property receives more values than its syntax allows. For example, margin accepts one to four values, so a fifth value is invalid. The color property accepts only a single color value, so writing two colors is an error.
• Unrecognized values: A keyword is misspelled (e.g., blocky instead of block) or simply doesn’t exist for that property (e.g., color: bold).
• Newer or non-standard values: A value that belongs to a draft specification, a vendor-prefixed feature, or a browser-specific extension may not be recognized by the validator.
• Missing separators or syntax errors: A missing comma in a multi-value function like rgb() or a missing slash in shorthand like font can cause the parser to misinterpret the values.

This matters because browsers handle invalid CSS unpredictably — they typically discard the entire declaration, which means your intended styles silently disappear. Fixing these errors ensures your styles are applied consistently across browsers and makes your stylesheets easier to maintain and debug.

How to Fix

1. Identify the property and value reported in the error message.
2. Check spelling of every keyword. Common mistakes include inheret (should be inherit), trasparent (should be transparent), and centre (should be center).
3. Count the values and compare against the property’s specification. Consult MDN Web Docs for the accepted value syntax.
4. Verify function syntax — ensure commas, slashes, and parentheses are correct in functions like rgb(), calc(), and clamp().
5. Check for unsupported modern syntax — if you’re using newer CSS features, the validator may not recognize them yet. In that case, verify the syntax is correct per the spec and consider the warning informational.

Examples

Too many values for a property

The color property only accepts a single color value, and margin accepts at most four values:

<!-- ❌ Invalid: too many values -->

<p style="color: red blue;">Hello</p>
<p style="margin: 10px 20px 5px 0px 15px;">Hello</p>

<!-- ✅ Valid: correct number of values -->

<p style="color: red;">Hello</p>
<p style="margin: 10px 20px 5px 0px;">Hello</p>

Unrecognized keyword value

A typo or non-existent keyword triggers the error:

<!-- ❌ Invalid: "blocky" is not a valid display value -->

<div style="display: blocky;">Content</div>

<!-- ✅ Valid: correct keyword -->

<div style="display: block;">Content</div>

Misspelled value in a <style> block

<!-- ❌ Invalid -->

<style>
  .box {
    background-color: trasparent;
    text-align: centre;
  }
</style>

<!-- ✅ Valid -->

<style>
  .box {
    background-color: transparent;
    text-align: center;
  }
</style>

Incorrect function syntax

Missing commas or extra arguments inside CSS functions can also trigger this error:

<!-- ❌ Invalid: missing commas in rgb() -->

<p style="color: rgb(255 0 0 0.5);">Hello</p>

<!-- ✅ Valid: use the correct modern syntax with a slash for alpha -->

<p style="color: rgb(255 0 0 / 0.5);">Hello</p>

Shorthand property confusion

Shorthand properties like font and background have specific value order requirements. Providing values in the wrong order or mixing incompatible values causes errors:

<!-- ❌ Invalid: incorrect font shorthand -->

<style>
  p {
    font: bold Arial 16px;
  }
</style>

<!-- ✅ Valid: size must come before family, weight before size -->

<style>
  p {
    font: bold 16px Arial;
  }
</style>

When in doubt, break shorthand properties into their individual longhand properties (font-weight, font-size, font-family) to isolate which value the validator is rejecting.

Learn more:

MDN Reference

CSS: Syntax and Parsing

→

MDN Reference

CSS value definition syntax

→

MDN Reference

CSS reference

→

web.dev Article

Learn CSS

→