Prev Next

CSS Text Transformation

The text-transform property modifies the capitalization of text. You can convert text to uppercase, lowercase, or capitalize each word’s first letter. This helps maintain consistent text styling without changing the actual HTML content.

Key Topics

Common Values

text-transform: uppercase;, lowercase;, or capitalize; adjust how text is displayed.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Transform Example</title>
    <style>
        h1 {
            text-transform: uppercase;
            font-family: Arial, sans-serif;
        }
        p {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <h1>This heading is uppercase</h1>
    <p>this paragraph will have each word capitalized.</p>
</body>
</html>

Explanation: Applying transformations in CSS avoids manually editing content’s letter case, maintaining flexibility and consistency.

Use Cases

Use uppercase for buttons or headings, capitalize for titles, and lowercase for stylistic choices. Keep transformations consistent with your site’s tone and branding.

Key Takeaways

  • Styling: Adjust text case without changing the source content.
  • Consistency: Maintain uniform capitalization across headings and UI elements.
  • Flexibility: Quickly adapt to design trends or preferences.
Prev Next