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.
Example
text-transform:capitalize;
First letter of each word is capitalized in the text.
text example
text-transform:uppercase;
In this case, each letter of the word is in the capitalized form.
text example
text-transform:lowercase;
It converts uppercase letters into lowercase.
text example
Try </>
text-align
This property decides where to align the text. The value of this property may be right, center and left.
Example
text-align:right;
The is aligned on the right side.
right side text
text-align:center;
In this case, the text is at the middle position.
text at center
text-align:left;
The text is aligned on the left side. By default, the text is also on the left side.
left side text
Try </>
word-spacing
It represents the additional spacing between the words. It helps in making the textual structure more presentable.
letter-spacing
It adds the additional space between two letters. But the justification rules (if applied) may increase or decrease the spacing.
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.
Example
<style>
span{line-height:5px;}
</style>
Try </>
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.
Example
<style>
p{text-indent:5em;}
</style>
Try </>
Next Previous
Was this article helpful?
