Quick Reach
CSS text-transform property
The text-transform property is used to transform the text into uppercase, lowercase or capitalized form in the specified element.
>>An uppercase example in the heading
For example, in your heading 1 (h1), you want all words started with the capital letter. Similarly, if you need the whole sentence or paragraph transformed to uppercase, that might be database driven (or not in known form). This can be done by using the CSS text-transform property. How to use it…? See the examples below.
A capitalize example
The text-transform property supports the following values:
- capitalize: makes the first letter of each word capital.
- uppercase: converts the specified text in upper case form.
- lowercase: converts specified text in the lowercase.
- none: The text remains as it is. This is the default value.
CSS uppercase example
Following is an uppercase example. The example transforms the text given in the heading 1 to the uppercase by using the uppercase value in the text-transform CSS property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #3355bb;
text-transform:uppercase;
}
</style>
</head>
<body>
<h1>This is text transform chapter with examples!</h1>
</body>
</html>
|
You can see, only the first letter of the heading is capital in the code. As this code is executed, the text-transform property converted it to uppercase format by using the uppercase value.
CSS capitalize example
The following example shows how to use the capitalize value. The example transforms the text given in the heading 1 to the capitalized format.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #3355bb;
text-transform:capitalize;
}
</style>
</head>
<body>
<h1>This is text transform chapter with examples!</h1>
</body>
</html>
|
Before the execution, you can see the text in the heading 1 contains only one capital letter, which is at the beginning. After the code is executed, the first letter of each word is capitalized by using the capitalize value in the text-transform property.
Similarly, you can use the lowercase and none values to transform text by using text-transform property.
Leave A Comment?