Text Transformations & Decorations
What are Text Transformations & Decorations?
Imagine using a highlighter to underline important terms in a textbook, or using a stamps kit to automatically capitalize every letter of a name on a form.In CSS, we apply stylistic overrides to characters using:
text-decoration: Adds line styles like underline, line-through (strike-through), or none (commonly used to strip default underlines from anchor link elements).text-transform: Automatically converts letter casing to uppercase, lowercase, or capitalize (capitalizes the first letter of every word) without modifying the actual text in your HTML.Why does it matter?
Text decorations and transformations separate design style from content data. For example, instead of typing headers in all caps in your HTML (like<h1>WELCOME</h1>), you can type them normally and write text-transform: uppercase; in CSS. This keeps search engines happy while maintaining your design aesthetics.
Syntax Breakdown
text-decoration: underline; — Underlines characters.text-decoration: none; — Clears default underlines.text-transform: uppercase; — Converts all characters to uppercase.text-transform: capitalize; — Capitalizes first letter of words.Common Mistakes
font-weight: bold; or font-style: italic; instead!Quick Reference
text-decoration — Underlines, overlines, or strikes through text.text-transform — Enforces capitalization standards dynamically.letter-spacing — Controls spacing between individual letters.Your Task
Set the `text-decoration` property of the `a` selector to `none` to remove the default link underline.
index.html
Type code above to start the lesson.
Live Preview