CSS Text-transform

The text-transform property in CSS is used to control the capitalization of text. It can change the case of text to uppercase, lowercase, or capitalize the first letter of each word.

Syntax

element {
    text-transform: none | capitalize | uppercase | lowercase | full-width | inherit | initial | unset;
}

Try It Now

Property Values

  • none: Default value. No transformation is applied; the text is displayed as it is.
  • capitalize: Transforms the first letter of each word to uppercase.
  • uppercase: Transforms all characters to uppercase.
  • lowercase: Transforms all characters to lowercase.
  • full-width: Changes characters from a narrow width to a full width (used mainly in East Asian typography).
  • inherit: Inherits the text-transform value from the parent element.
  • initial: Sets the property to its default value.
  • unset: Resets the property to either the inherited value or the initial value, depending on the context.

Examples

Example 1: Capitalize the First Letter of Each Word

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <p>this is a paragraph where the first letter of each word is capitalized.</p>
</body>
</html>

Try It Now

This example capitalizes the first letter of each word in the paragraph.

Example 2: Convert Text to Uppercase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p>This text will be transformed to uppercase.</p>
</body>
</html>

Try It Now

All the text in the paragraph will be displayed in uppercase letters.

Example 3: Convert Text to Lowercase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p>This TEXT will be transformed to lowercase.</p>
</body>
</html>

Try It Now

The text in the paragraph will be displayed in lowercase letters.

Example 4: Full-width Transformation (for East Asian Text)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-transform: full-width;
        }
    </style>
</head>
<body>
    <p>Example of full-width transformation: abcdefg123.</p>
</body>
</html>

Try It Now

This example transforms characters into their full-width form, commonly used in East Asian text formatting.

Use Cases

  • Headings: Automatically capitalize titles or headings without manually changing the text content.
  • User Inputs: Format text inputs such as form data consistently.
  • Styling: Apply consistent text styling across a website to ensure uniform appearance.

Tips for Beginners

  • Use text-transform to maintain a consistent text style throughout your website.
  • Be mindful of accessibility; ensure that changes in text case don’t affect readability or meaning.
  • Combine text-transform with other CSS text properties like font-style, font-weight, and text-align for more comprehensive text styling.

The text-transform property is a handy tool for controlling the text case in your web design, helping to maintain a clean and professional appearance while reducing the need for manual text adjustments.