CSS text transform

In CSS, the text-transform property is used to control the capitalization of text within an element. This property allows you to transform text to uppercase, lowercase, capitalize.

Syntax


selector {
  text-transform: value;
}

text-transform values

none: Default. No transformation is applied.

capitalize: Transforms the first character of each word to uppercase.

uppercase: Transforms all characters to uppercase.

lowercase: Transforms all characters to lowercase.

full-width: Changes the text to full-width form (typically used in East Asian typography).

inherit: Inherits the text-transform value from its parent element.

initial: Sets the property to its default value.

Examples

1. Capitalize:


p.capitalize {
  text-transform: capitalize;
}

2. Uppercase:


p.uppercase {
  text-transform: uppercase;
}

3. Lowercase:


p.lowercase {
  text-transform: lowercase;
}

4. Full-width:


p.full-width {
  text-transform: full-width;
}

5. None (No Transformation):


p.none {
  text-transform: none;
}

Example: Here is an example of a simple HTML page demonstrating various uses of the text-transform property:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .full-width {
            text-transform: full-width;
        }
        .none {
            text-transform: none;
        }
    </style>
</head>
<body>
    <p class="capitalize">this text will have each word capitalized.</p>
    <p class="uppercase">this text will be transformed to uppercase.</p>
    <p class="lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
    <p class="full-width">this text will be transformed to full-width form.</p>
    <p class="none">This Text Will Not Be Transformed.</p>
</body>
</html>

CSS text transform – Interview Questions

Q 1: What is text-transform in CSS?

Ans: It controls the capitalization of text.

Q 2: Common values of text-transform?

Ans: uppercase, lowercase, capitalize.

Q 3: Does text-transform change actual text content?

Ans: No, it only changes visual appearance.

Q 4: Can text-transform be inherited?

Ans: Yes, it is inherited.

Q 5: Where is text-transform commonly used?

Ans: For headings, buttons, and labels.