CSS text-transform Property
The CSS text-transform property controls the capitalization of text without changing the text written in the HTML document.
Text can be displayed in uppercase or lowercase letters, or the beginning of each word can be capitalized. This makes it possible to control capitalization as part of a website's presentation while keeping the original text content unchanged.
text-transform Syntax
The text-transform property accepts keyword values that determine how the capitalization of text is displayed.
p {
text-transform: uppercase;
}This rule displays alphabetic characters in matching <p> elements as uppercase where the writing system supports that transformation.
Uppercase Text
The uppercase value displays letters using their uppercase forms.
h2 {
text-transform: uppercase;
}For example, text written as Getting Started in the HTML can be displayed as GETTING STARTED without rewriting the original content.
Lowercase Text
The lowercase value displays letters using their lowercase forms.
p {
text-transform: lowercase;
}Text written as CSS TUTORIAL can therefore be displayed as css tutorial while the original HTML remains unchanged.
Capitalizing Words
The capitalize value converts the first typographic letter unit of each word to uppercase while leaving the other characters unchanged.
h2 {
text-transform: capitalize;
}For example, learning css properties can be displayed as Learning Css Properties. The property does not automatically apply normal title capitalization rules, so words such as articles and conjunctions are not treated differently.
Removing Text Transformation
The none value prevents capitalization changes from being applied by text-transform. It is the initial value of the property.
p {
text-transform: none;
}This displays the text using its original capitalization rather than converting it to uppercase, lowercase, or capitalized text.
Original Text and text-transform
The text-transform property changes how text is presented. It does not rewrite the text stored in the HTML document.
<p>Learning CSS is useful.</p>p {
text-transform: uppercase;
}The browser displays the paragraph as LEARNING CSS IS USEFUL., but the HTML source still contains Learning CSS is useful.
Keeping the original text correctly capitalized in the HTML is useful because the presentation can later be changed or removed without editing the content itself.
Inheriting text-transform
The text-transform property is inherited. Descendant text normally uses the computed transformation of its parent unless another rule specifies a different value.
nav {
text-transform: uppercase;
}Text inside the <nav> element will normally be displayed in uppercase. A descendant can override the inherited transformation by declaring another text-transform value.
text-transform Example
The following example uses uppercase to display the paragraph in uppercase letters. Open the example in the editor and change uppercase to lowercase, capitalize, or none, then run the code to compare the results.
p {
text-transform: uppercase;
}