BlogsDope image BlogsDope

CSS text-transform Property

May 28, 2017 HTML CSS TEXT 2617

The text-transform property specifies the test case and controls the way text is capitalized. Using this property, you can set the text case as all-lowercase, all-uppercase or with each word capitalized.

The text-transform values are stated below.

uppercase : Transforms all characters to uppercase.

lowercase : Transforms all characters to lowercase.

capitalize : Transforms the first character of each word to uppercase. There will be no effect on the other characters.

none : There will be no change in the text case and the capitalization. This is the default value.

initial : Sets the default value of the property.

inherit : Inherits the value of this property from its parent element.

HTML

<p class="uppercase">This texT will appear in UpperCase</p>
<p class="lowercase">This texT will appear in LowerCase</p>
<p class="capitalize">This texT will be Capitalized</p>

CSS

.uppercase{
	text-transform: uppercase;
}
.lowercase{
	text-transform: lowercase;
}
.capitalize{
	text-transform: capitalize;
}

This texT will appear in UpperCase

This texT will appear in LowerCase

This texT will be Capitalized

The above example demonstrates it all. Also note that capitalize will not capitalize the first letter which is after a number. The following example will make it clear.

HTML

<p class="capitalize">This is July</p>
<p class="capitalize">This is 4th July</p>
<p class="capitalize">This is !exclamation</p>

CSS

.capitalize{
	text-transform: capitalize;
}

This is July

This is 4th July

This is !exclamation

Here, it didn't capitalize the first letter followed by the number 4, but it did capitalize the letter followed by '!'.

Browser Support

text-transform property is supported by all the browsers


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).