CSS Text - text-transform
Description
Use the text-transform property to convert your text to upper case, to lower case, or you can use it to capitalize words within your html text.
Default is
none
text-transform: none;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: inherit;
See also: text-indent, text-align, text-decoration, white-space.
Examples for text-transform
Example 1:
An example showing uppercase:
lower case text transformed to uppercase using text-transform: uppercase;
<style>
#test { text-transform: uppercase; }
</style>
<div id="test">lower case text transformed to uppercase using text-transform: uppercase;</div>
Example 2:
An example showing lowercase:
UPPER CASE TEXT TRANSFORMED TO LOWERCASE USING TEXT-TRANSFORM: LOWERCASE;
<style>
#test2 { text-transform: lowercase; }
</style>
<div id="test">UPPER CASE TEXT TRANSFORMED TO LOWERCASE USING TEXT-TRANSFORM: LOWERCASE;</div>
Example 3:
An example showing capitalize:
lower case text with the first letter in each word turned into a capital letter using text-transform: capitalize;
<style>
#test3 { text-transform: capitalize; }
</style>
<div id="test3">lower case text with the first letter in each word turned into a capital letter using text-transform: capitalize;</div>
Values for text-transform
| text-transform |
none
lowercase
uppercase
capitalize
inherit |
Use the text-transform property to convert your text to upper case, to lower case, or you can use it to capitalize words within your html text. |