Text transform in css
In this article we are going to learn about text transform property, capitalize, uppercase and lowercase in css, how to customize or change the case of a text.
We learnt about css in general, selectors css, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css, box shadow in css, text align in css, table style in css, text shadow in css, letter spacing in css and word spacing in css so, we will be focusing on text transform.
Text transform
Text transform is a Cascading Style Sheet property used to customize or change the case of a text with the values of capitalize, uppercase and lowercase.
Capitalize
Capitalize is a value of text transform property used to start each word with capital letter in a sentance.
Let us create a div element with capitalize value of text transform property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-transform-example {
text-transform: capitalize;
}
<style/>
</head>
<body>
<div class="text-transform-example">This is a div element with capitalize value of text-transform applied.</div>
</body>
</html>
So, we should have the following results.
Uppercase
Uppercase is a value of text transform property used to cause the whole text to be in capital letters in a sentance.
Let us create another div element with uppercase value of text transform property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-transform-example {
text-transform: uppercase;
}
<style/>
</head>
<body>
<div class="text-transform-example">This is a div element with uppercase value of text-transform applied.</div>
</body>
</html>
So, we should have the following results.
Lowercase
Lowercase is a value of text transform property used to cause the whole text to be in small letters in a sentance.
Let us create a div element with lowercase value of text transform property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-transform-example {
text-transform: lowercase;
}
<style/>
</head>
<body>
<div class="text-transform-example">This is a div element with lowercase value of text-transform applied.</div>
</body>
</html>
So, we should have the following results.
Let us sum up by creating three div elements with capitalize, uppercase and lowercase values of text transform property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-transform-example1 {
text-transform: capitalize;
}
.text-transform-example2 {
text-transform: uppercase;
}
.text-transform-example3 {
text-transform: lowercase;
}
<style/>
</head>
<body>
<div class="text-transform-example1">This is a div element with capitalize value of text-transform applied.</div>
<div class="text-transform-example2">This is a div element with uppercase value of text-transform applied.</div>
<div class="text-transform-example3">This is a div element with lowercase value of text-transform applied.</div>
</body>
</html>
So, we should have the following results.