Retour au cours

Lesson 32: Text Decoration and Transformation

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

32. Text Decoration and Transformation

We can modify the visual appearance of text with lines and capitalization using text-decoration and text-transform.

Text Decoration (text-decoration)

This property is most commonly used to remove or modify the default underline on anchor links (<a>). It is a shorthand for style, line, and color.

Common Usage: Removing Link Underlines

css a { text-decoration: none; /* Removes the default underline / color: blue; / Must manually set the link color */ }

a:hover { text-decoration: underline; /* Adds underline back on hover */ }

Longhand Properties (Modern)

CSS now allows styling the line itself (rarely needed for beginners):

  • text-decoration-line: underline, overline, line-through
  • text-decoration-style: solid, double, wavy
  • text-decoration-color

Text Transformation (text-transform)

This property controls the capitalization of the text content without needing to edit the HTML.

ValueDescription
uppercaseConverts all text to capital letters.
lowercaseConverts all text to lowercase letters.
capitalizeConverts the first letter of every word to uppercase.
none (default)Leaves the text as it is.

css .button { text-transform: uppercase; /* Looks like BUY NOW / letter-spacing: 1px; / Looks better with spacing */ }

.name { text-transform: capitalize; /* Looks like John Smith */ }