Text transform in HTML CSS
In this blog we are going to see about different text styles that i can use in the whole text in para.
Table of contents
In this blog wee are going to see about different text transformation that we can use to beautify the text written or change the style of the text used.
Here is the syntax:
text-transform: capitalize| uppercase | lowercase | none | initial | inherit;
In this we can use text transform as capitalize
capitalize
It transforms the first character of each word to uppercase. It will not capitalize the first letter after the number. It only affects the first letters of the words instead of changing the rest of the letters in the word.
<!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 my hashnode page</p> </body>
</html>
OUTPUT:
Uppercase
<!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: capitalize</h2>
<p>hello world</p>
<p>WELCOME to the my hashnode page</p>
</body>
</html>
OUTPUT:
Lowercase
<!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: capitalize</h2>
<p>hello world</p>
<p>WELCOME to the my hashnode page</p>
</body>
</html>
OUTPUT:
In this way we can set text transform and decide the size of the text for the whole para.