# CSS: “text-decoration”: X is not a “text-decoration” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-text-decoration-x-is-not-a-text-decoration-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

`text-decoration` only draws lines on text, so it rejects values like `italic` or `bold` that change the font itself.

The property is a shorthand for four others: `text-decoration-line` (`underline`, `overline`, `line-through` or `none`), `text-decoration-style` (`solid`, `double`, `dotted`, `dashed` or `wavy`), `text-decoration-color` and `text-decoration-thickness`. Every word in the value has to belong to one of them. The validator names only the first word that doesn't, so `text-decoration: underline bold italic` gets reported for `bold`.

Italic text comes from `font-style: italic`, and bold text from `font-weight: bold`. Misspelled keywords trigger the same error: CSS has no `underlined` or `strikethrough`, only `underline` and `line-through`.

Browsers ignore the whole declaration when any word in it is invalid. With `text-decoration: underline italic`, the text gets neither the underline nor the italics.

When the italics mean something, use an element instead of a `style` attribute: `<em>` for stress emphasis, `<i>` for a term from another language. Both render in italics by default.

## Invalid example

```html
<p>
  <span style="text-decoration: italic;">Office closed on public holidays.</span>
</p>
```

## Valid example

```html
<p>
  <span style="font-style: italic;">Office closed on public holidays.</span>
</p>
```