CSS Text-Transform Property
Text-Transform in CSS
The text-transform property permits us to alter the text case. It controls the capitalization of the text. This property is employed to design the text appearance in every uppercase or every lowercase, or it may transform each word’s first character to uppercase.
Syntax:
text-transform: capitalize| uppercase| lowercase| none| initial| inherit;
Let’s understand the above property values one by one with an example.
- Capitalize
It transforms each word’s first character to uppercase. But, it can’t change any first letter after any number into the capitalized form. It can affect any word’s first letter only, rather changing the other letters of any word.
The letter in any word that has already defined in the capitalized form will not be switched to the lowercase form by using this property.
The example to describe the capitalize property is illustrated below:
Syntax:
text-transform: capitalize;
Example:
<!DOCTYPE html>
<html>
<head>
<title> Text-transform Property </title>
<style>
body
{
text-align: center;
}
h1
{
color: navy;
}
p
{
text-transform: capitalize;
}
</style>
</head>
<body>
<center>
<h1> Text-transform Property in CSS </h1>
<h2> text-transform: capitalize </h2>
<p> Hello World! </p>
<p> Welcome to this Page </p>
</body>
</html>
Output:
- uppercase
As the name suggests, it transforms word’s every character into uppercase.
Syntax:
text-transform: uppercase;
Example:
<!DOCTYPE html>
<html>
<head>
<title> Text-transform Property </title>
<style>
body
{
text-align: center;
}
h1
{
color: navy;
}
p
{
text-transform: uppercase;
}
</style>
</head>
<body>
<center>
<h1> Text-transform Property in CSS </h1>
<h2> text-transform: uppercase </h2>
<p> Hello World! </p>
<p> Welcome to this Page </p>
</body>
</html>
Output:
- lowercase
This property can transform word’s every character into lowercase.
Syntax:
text-transform: lowercase;
Example:
<!DOCTYPE html>
<html>
<head>
<title> Text-transform Property </title>
<style>
body
{
text-align: center;
}
h1
{
color: navy;
}
p
{
text-transform: lowercase;
}
</style>
</head>
<body>
<center>
<h1> Text-transform Property in CSS </h1>
<h2> text-transform: lowercase </h2>
<p> HELLO WORLD! </p>
<p> WELCOME TO THIS PAGE </p>
</body>
</html>
Output:
- none
This property does not provide any capitalization and it is defined as a default value. It delivers any text form as it is.
Syntax:
text-transform: none;
Example:
<!DOCTYPE html>
<html>
<head>
<title> Text-transform Property </title>
<style>
body
{
text-align: center;
}
h1
{
color: navy;
}
p
{
text-transform: none;
}
</style>
</head>
<body>
<center>
<h1> Text-transform Property in CSS </h1>
<h2> text-transform: none </h2>
<p> Hello World! </p>
<p> Welcome to this Page </p>
</body>
</html>
Output:
