CSS text
There are many text properties that can transform text into uppercase, lowercase. They can specify the position of the text and the space between words or letters.
text-transform
It transforms simple text into other cases. For example, capitalize, uppercase and lowercase.
<div style="width:100%; border-bottom:1px solid rgb(200,200,200);">
<p><span style="color:#170">text-transform</span>:<span style="color:#0d43fa !important;">capitalize</span>;</p>
<p>First letter of each word is capitalized in the text.</p>
<p style="font-size:20px; text-transform:capitalize; text-align:center;">text example</p>
</div>
<div style="width:100%; border-bottom:1px solid rgb(200,200,200);">
<p><span style="color:#170">text-transform</span>:<span style="color:#0d43fa !important;">uppercase</span>;</p>
<p>In this case, each letter of the word is in the capitalized form.</p>
<p style="font-size:20px; text-transform:uppercase; text-align:center;">text example</p>
</div>
<div style="width:100%; border-bottom:1px solid rgb(200,200,200);">
<p><span style="color:#170">text-transform</span>:<span style="color:#0d43fa !important;">lowercase</span>;</p>
<p>It converts uppercase letters into lowercase.</p>
<p style="font-size:20px; text-transform:lowercase; text-align:center;">text example</p>
</div>
<br>
text-align
This property decides where to align the text. The value of this property may be right, center and left.
<div style="width:100%; border-bottom:1px solid rgb(200,200,200);">
<p><span style="color:#170">text-align</span>:<span style="color:#0d43fa !important;">right</span>;</p>
<p>The is aligned on the right side.</p>
<p style="font-size:20px; text-align:right;">right side text</p>
</div>
<div style="width:100%; border-bottom:1px solid rgb(200,200,200);">
<p><span style="color:#170">text-align</span>:<span style="color:#0d43fa !important;">center</span>;</p>
<p>In this case, the text is at the middle position.</p>
<p style="font-size:20px;text-align:center;">text at center</p>
</div>
<div style="width:100%; border-bottom:1px solid rgb(200,200,200);">
<p><span style="color:#170">text-align</span>:<span style="color:#0d43fa !important;">left</span>;</p>
<p>The text is aligned on the left side. By default, the text is also on the left side.</p>
<p style="font-size:20px;">left side text</p>
</div>
<br>
word-spacing
It represents the additional spacing between the words. It helps in making the textual structure more presentable.
<div style="width:100%; float:left; height:auto;">
<div style="width:230px; float:left; text-align:center; border-bottom:1px solid rgba(200,200,200,1);"><span style="font-size:20px; word-spacing:5px;">one two</span><p>word-spacing:5px;</p></div>
<div style="width:230px; float:left; text-align:center; border-bottom:1px solid rgba(200,200,200,1);"><span style="font-size:20px; word-spacing:25px;">one two</span><p>word-spacing:25px;</p></div>
<div style="width:230px; float:left; text-align:center; border-bottom:1px solid rgba(200,200,200,1);"><span style="font-size:20px; word-spacing:45px;">one two</span><p>word-spacing:45px;</p></div>
</div>
<br>
letter-spacing
It adds the additional space between two letters. But the justification rules (if applied) may increase or decrease the spacing.
<div style="width:100%; height:auto; float:left;">
<div style="width:230px; float:left; border-bottom:1px solid rgba(200,200,200,1); text-align:center;"><span style="font-size:20px; letter-spacing:2px;">letter</span><p>letter-spacing:2px;</p></div>
<div style="width:230px; float:left; border-bottom:1px solid rgba(200,200,200,1); text-align:center;"><span style="font-size:20px; letter-spacing:5px;">letter</span><p>letter-spacing:5px;</p></div>
<div style="width:230px; float:left; border-bottom:1px solid rgba(200,200,200,1); text-align:center;"><span style="font-size:20px; letter-spacing:8px;">letter</span><p>letter-spacing:8px;</p></div>
</div>
<br>
text-justify property adds the justification rules.
line-height
It adds additional space between the lines to enhance the readability. The value may be in px or em units.
<style>
span{line-height:5px;}
</style>5px means that one line of the text is at a distance of 5em from the other line. It represents vertical distance between lines.
text-indent
It adds marginal space at the start of lines of text. The indentation may be for the first line or for all the lines except first one. It depends upon the value of the text-indent. There are many values for the this property.
length
The length value indents the first line. For example, 5em means an indentation of 5em.
<style>
p{text-indent:5em;}
</style>