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.

Example

one two

word-spacing:5px;

one two

word-spacing:25px;

one two

word-spacing:45px;


Try </>

letter-spacing

It adds the additional space between two letters. But the justification rules (if applied) may increase or decrease the spacing.

Example

letter

letter-spacing:2px;

letter

letter-spacing:5px;

letter

letter-spacing:8px;


Try </>

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 </>


Was this article helpful?