# CSS: “text-transform”: “X” is not a “text-transform” value.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-text-transform-x-is-not-a-text-transform-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `text-transform` CSS property controls the capitalization of text within an element. It's commonly used to enforce consistent text casing — for example, making headings appear in all uppercase or ensuring navigation links are lowercase — without changing the actual content in the HTML. When the validator encounters a value it doesn't recognize for this property, it flags it as invalid.
This error can occur for several reasons:
- **Typos** — writing `upppercase` instead of `uppercase`, or `Capitalize` instead of `capitalize` (CSS values are case-sensitive in validation contexts).
- **Incorrect values** — using values from other properties, like `bold`, `italic`, or `center`, which don't apply to `text-transform`.
- **Non-standard values** — using browser-specific or experimental values that aren't part of the CSS specification.
- **Wrong property** — confusing `text-transform` with `text-decoration`, `text-align`, or `font-variant`, and using their values here instead.
Fixing this matters because invalid CSS can lead to unpredictable rendering across browsers. While most browsers will simply ignore an invalid declaration, your intended styling won't be applied, potentially breaking your design. Keeping your CSS valid also improves maintainability and ensures forward compatibility.
### Valid values for `text-transform`
| Value | Effect |
|---|---|
| `none` | No capitalization change (default) |
| `capitalize` | First letter of each word is uppercased |
| `uppercase` | All characters are converted to uppercase |
| `lowercase` | All characters are converted to lowercase |
| `full-width` | Forces characters into a full-width form (useful for CJK typography) |
| `full-size-kana` | Converts small kana characters to full-size equivalents |
## Examples
### Incorrect — invalid value
In this example, `bold` is not a valid `text-transform` value. It likely belongs on the `font-weight` property instead.
```html
Welcome to our site
```
Similarly, a simple typo will trigger this error:
```html
Welcome to our site
```
### Correct — using valid values
```html
Welcome to our site
```
```html
Welcome to our site
```
### Correct — separating concerns with the right properties
If you intended to make text bold and uppercase, use the appropriate property for each effect:
```html
Welcome to our site
```
### Correct — using `text-transform` in a stylesheet
```html
Text Transform Example
site navigation
john doe
myVariable
```
If you're unsure which value you need, `uppercase` and `capitalize` are the most commonly used. Use `none` when you need to override a `text-transform` rule inherited from a parent element.