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.