Validación HTML: CSS: "text-transform": "X" no es un valor de "text-transform".

Acerca de este problema de CSS

La propiedad CSS text-transform controla la capitalización del texto dentro de un elemento. Se usa comúnmente para aplicar un formato de texto consistente — por ejemplo, hacer que los títulos aparezcan en mayúsculas o asegurar que los enlaces de navegación estén en minúsculas — sin cambiar el contenido real en el HTML. Cuando el validador encuentra un valor que no reconoce para esta propiedad, lo marca como inválido.

Este error puede ocurrir por varias razones:

Errores tipográficos — escribir upppercase en lugar de uppercase, o Capitalize en lugar de capitalize (los valores CSS son sensibles a mayúsculas y minúsculas en contextos de validación).
Valores incorrectos — usar valores de otras propiedades, como bold, italic, o center, que no se aplican a text-transform.
Valores no estándar — usar valores específicos del navegador o experimentales que no forman parte de la especificación CSS.
Propiedad incorrecta — confundir text-transform con text-decoration, text-align, o font-variant, y usar sus valores aquí en su lugar.

Solucionar esto es importante porque el CSS inválido puede llevar a una renderización impredecible en diferentes navegadores. Aunque la mayoría de navegadores simplemente ignorarán una declaración inválida, tu estilo previsto no se aplicará, potencialmente rompiendo tu diseño. Mantener tu CSS válido también mejora la mantenibilidad y asegura compatibilidad futura.

Valores válidos para `text-transform`

Valor	Efecto
`none`	Sin cambio de capitalización (por defecto)
`capitalize`	La primera letra de cada palabra se convierte a mayúscula
`uppercase`	Todos los caracteres se convierten a mayúsculas
`lowercase`	Todos los caracteres se convierten a minúsculas
`full-width`	Fuerza los caracteres a una forma de ancho completo (útil para tipografía CJK)
`full-size-kana`	Convierte caracteres kana pequeños a sus equivalentes de tamaño completo

Ejemplos

Incorrecto — valor inválido

En este ejemplo, bold no es un valor válido de text-transform. Probablemente pertenece a la propiedad font-weight en su lugar.

<p style="text-transform: bold;">Bienvenido a nuestro sitio</p>

De manera similar, un simple error tipográfico desencadenará este error:

<p style="text-transform: uppercse;">Bienvenido a nuestro sitio</p>

Correcto — usando valores válidos

<p style="text-transform: uppercase;">Bienvenido a nuestro sitio</p>

<p style="text-transform: capitalize;">Bienvenido a nuestro sitio</p>

Correcto — separando responsabilidades con las propiedades correctas

Si tenías la intención de hacer el texto negrita y mayúsculas, usa la propiedad apropiada para cada efecto:

<p style="font-weight: bold; text-transform: uppercase;">Bienvenido a nuestro sitio</p>

Correcto — usando `text-transform` en una hoja de estilo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text Transform Example</title>
  <style>
    .heading {
      text-transform: uppercase;
    }
    .name {
      text-transform: capitalize;
    }
    .code-snippet {
      text-transform: none;
    }
  </style>
</head>
<body>
  <h1 class="heading">site navigation</h1>
  <p class="name">john doe</p>
  <code class="code-snippet">myVariable</code>
</body>
</html>

Si no estás seguro de qué valor necesitas, uppercase y capitalize son los más comúnmente usados. Usa none cuando necesites anular una regla text-transform heredada de un elemento padre.