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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-x-too-many-values-or-values-are-not-recognized
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

```html
<!-- ❌ Invalid: too many values -->
<p style="color: red blue;">Hello</p>
<p style="margin: 10px 20px 5px 0px 15px;">Hello</p>
```

```html
<!-- ✅ 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:

```html
<!-- ❌ Invalid: "blocky" is not a valid display value -->
<div style="display: blocky;">Content</div>
```

```html
<!-- ✅ Valid: correct keyword -->
<div style="display: block;">Content</div>
```

### Misspelled value in a `<style>` block

```html
<!-- ❌ Invalid -->
<style>
  .box {
    background-color: trasparent;
    text-align: centre;
  }
</style>
```

```html
<!-- ✅ 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:

```html
<!-- ❌ Invalid: missing commas in rgb() -->
<p style="color: rgb(255 0 0 0.5);">Hello</p>
```

```html
<!-- ✅ 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:

```html
<!-- ❌ Invalid: incorrect font shorthand -->
<style>
  p {
    font: bold Arial 16px;
  }
</style>
```

```html
<!-- ✅ 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.