This CSS property allows us to change the case of the text. It is used to control the text capitalization. This CSS property can be used to make the appearance of text in all-lowercase or all-uppercase or can convert the first character of each word to uppercase.
Syntax
text-transform: capitalize| uppercase | lowercase | none | initial | inherit;
Let's explore its attribute values alongside an illustration.
capitalize
It converts the initial character of every word to uppercase. The capitalization does not apply to the first letter following a numeral. The transformation solely impacts the beginning letters of words, leaving the remaining letters unchanged.
If the capitalize property is used on a word with existing capital letters, the letters in that word will remain in uppercase and will not convert to lowercase.
The illustration of this property is given below.
Syntax
text-transform: capitalize;
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
body{
text-align:center;
}
h1 {
color: blue;
}
p{
text-transform: capitalize;
}
</style>
</head>
<body>
<center>
<h1>CSS text-transform property</h1>
<h2>text-transform: capitalize</h2>
<p>hello world</p>
<p>WELCOME to the C# Tutorial</p>
</body>
</html>
uppercase
As its name implies, it transforms all characters of the word into uppercase.
Syntax
text-transform: uppercase;
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
body{
text-align:center;
}
h1 {
color: blue;
}
p{
text-transform: uppercase;
}
</style>
</head>
<body>
<center>
<h1>CSS text-transform property</h1>
<h2>text-transform: uppercase</h2>
<p>hello world</p>
<p>WELCOME to the C# Tutorial</p>
</body>
</html>
lowercase
It converts all characters of the word to lowercase.
Syntax
text-transform: lowercase;
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
body{
text-align:center;
}
h1 {
color: blue;
}
p{
text-transform: lowercase;
}
</style>
</head>
<body>
<center>
<h1>CSS text-transform property</h1>
<h2>text-transform: lowercase</h2>
<p>HELLO WORLD</p>
<p>WELCOME TO THE C# Tutorial</p>
</body>
</html>
It represents the initial value without any capital letters. It displays the text in its original form.
Syntax
text-transform: none;
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
body{
text-align:center;
}
h1 {
color: blue;
}
p{
text-transform: none;
}
</style>
</head>
<body>
<center>
<h1>CSS text-transform property</h1>
<h2>text-transform: none</h2>
<p>Hello World</p>
<p>Welcome to the C# Tutorial.</p>
</body>
</html>