Validación HTML: CSS: X: Demasiados valores o los valores no se reconocen.

Acerca de este problema de CSS

Cada propiedad CSS tiene una sintaxis de valor definida que especifica exactamente qué valores acepta y cuántos. Cuando el validador encuentra una declaración que no coincide con esta sintaxis, marca el error. Esto puede suceder por varias razones distintas:

Demasiados valores: Una propiedad recibe más valores de los que su sintaxis permite. Por ejemplo, margin acepta de uno a cuatro valores, por lo que un quinto valor es inválido. La propiedad color acepta solo un único valor de color, por lo que escribir dos colores es un error.
Valores no reconocidos: Una palabra clave está mal escrita (ej., blocky en lugar de block) o simplemente no existe para esa propiedad (ej., color: bold).
Valores más nuevos o no estándar: Un valor que pertenece a una especificación en borrador, una característica con prefijo de proveedor, o una extensión específica del navegador puede no ser reconocido por el validador.
Separadores faltantes o errores de sintaxis: Una coma faltante en una función de múltiples valores como rgb() o una barra faltante en propiedades abreviadas como font puede hacer que el analizador malinterprete los valores.

Esto importa porque los navegadores manejan el CSS inválido de manera impredecible — típicamente descartan toda la declaración, lo que significa que tus estilos deseados desaparecen silenciosamente. Corregir estos errores asegura que tus estilos se apliquen consistentemente en todos los navegadores y hace que tus hojas de estilo sean más fáciles de mantener y depurar.

Cómo solucionarlo

Identifica la propiedad y el valor reportados en el mensaje de error.
Verifica la ortografía de cada palabra clave. Los errores comunes incluyen inheret (debería ser inherit), trasparent (debería ser transparent), y centre (debería ser center).
Cuenta los valores y compara contra la especificación de la propiedad. Consulta MDN Web Docs para la sintaxis de valores aceptados.
Verifica la sintaxis de funciones — asegúrate de que las comas, barras y paréntesis sean correctos en funciones como rgb(), calc(), y clamp().
Verifica sintaxis moderna no compatible — si estás usando características CSS más nuevas, el validador puede no reconocerlas aún. En ese caso, verifica que la sintaxis sea correcta según la especificación y considera la advertencia como informativa.

Ejemplos

Demasiados valores para una propiedad

La propiedad color solo acepta un único valor de color, y margin acepta como máximo cuatro valores:

<!-- ❌ Inválido: demasiados valores -->

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

<!-- ✅ Válido: número correcto de valores -->

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

Palabra clave de valor no reconocida

Un error tipográfico o palabra clave inexistente desencadena el error:

<!-- ❌ Inválido: "blocky" no es un valor de display válido -->

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

<!-- ✅ Válido: palabra clave correcta -->

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

Valor mal escrito en un bloque `<style>`

<!-- ❌ Inválido -->

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

<!-- ✅ Válido -->

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

Sintaxis de función incorrecta

Comas faltantes o argumentos extra dentro de funciones CSS también pueden desencadenar este error:

<!-- ❌ Inválido: comas faltantes en rgb() -->

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

<!-- ✅ Válido: usa la sintaxis moderna correcta con una barra para alfa -->

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

Confusión con propiedades abreviadas

Las propiedades abreviadas como font y background tienen requisitos específicos de orden de valores. Proporcionar valores en el orden incorrecto o mezclar valores incompatibles causa errores:

<!-- ❌ Inválido: propiedad abreviada font incorrecta -->

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

<!-- ✅ Válido: el tamaño debe ir antes de la familia, el peso antes del tamaño -->

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

Cuando tengas dudas, divide las propiedades abreviadas en sus propiedades individuales completas (font-weight, font-size, font-family) para aislar qué valor está rechazando el validador.