CSS Text

text-align

This property is used to align the text within its parent container.

Applicable Values:

left, right, center, justify, inherit

inherit – it specifies that the value should be same as the value of its parent.

HTML snippet:

<div>
Hello world! This is a sample text
</div>

CSS snippet:

div{
background-color : #e1e1e1;
text-align : right;
}

Output:

The text is aligned on the right side of the <div> element.

text-decoration

This property is used to add decorations to the text of an element.

Applicable Values:

none – no decorations will be applied. (used to remove underline from <a> tag)

underline – Each line of text is underlined

overline – each line of text has a line above it.

line-through – each line of text has a line through the middle.

HTML snippet:

<div>
<span>
<a id="none" href="#">Anchor's underline removed</a>
</span><br><br>
<span id="underlined">
Hello world! This text is underlined
</span><br><br>
<span id="overlined">
Hello world! This text is overlined
</span><br><br>
<span id="line-through">
Hello world! This text has line-through style
</span><br>
</div>

CSS snippet:

div{
background-color : #e1e1e1;
} 

#none{
text-decoration : none;
}

#underlined{
text-decoration : underline;
}

#overlined{
text-decoration : overline;
}

#line-through{
text-decoration : line-through;
}

Output:

Text decorations are applied correspondingly.

text-transform

This property controls capitalization effects of the text.

Applicable Values:

capitalize

Puts the first character of each word in uppercase; other characters are unaffected.

uppercase

Puts all characters of each word in uppercase.

lowercase

Puts all characters of each word in lowercase.

none

No capitalization effects.

HTML snippet:

<div>
<span id="none">
hello world! no styles on this text
</span><br><br>
<span id="capitalized">
hello world! this text is capitalized
</span><br><br>
<span id="uppercase">
hello world! this text appears in uppercase
</span><br><br>
<span id="lowercase">
HELLO WORLD! This TEXT appears IN LOWERCase.
</span><br><br>
</div>

CSS snippet:

div{
background-color : #e1e1e1;
}

#none{
text-transform : none;
}

#capitalized{
text-transform : capitalize;
}

#uppercase{
text-transform : uppercase;
}

#lowercase{
text-transform : lowercase;
}

Output:

Text transformations are applied correspondingly.