CSS Text

There are many ways to display text on a web page with the help of CSS. We will discuss them in this section.

Align text

There can be four types of alignments, namely, left, right, center and justified. Hence, there can be only four possible values of the property, text-align. Example:

<html>
<head>
<style type="text/css">
div.center {text-align: center}
H3.left {text-align: left}
div.right {text-align: right}
H2.justify {text-align: justify}
</style>
</head>

<body>
<div class="center">This text in center aligned</div>
<H3 class="left">This text is left aligned</H3>
<div class="right">This text is right aligned</div>
<H2 class="justify">This is justified text. We have seen the other types
of alignments.</H2>
</body>
</html>

Output:

This text in center aligned
This text is left aligned
This text is right aligned
This is justified text. We have seen the other types of alignments.

Decorate Text

By using text-decoration property, the text can be decorated. Following are the ways of decorating the text.
Example:

<html>
<head>
<style type="text/css">
p.over {text-decoration: overline}
div.thru {text-decoration: line-through}
h3.under {text-decoration: underline}
div.blink {text-decoration: blink}
</style>
</head>

<body>
<p class="over">This text has line over it</p>
<div class="thru">This text has line through middle</div>
<h3 class="under">This is underlined text</h3>
<div class="blink">This is blinking text</div>
</body>
</html>

The above values of text-decoration are self-explanatory.
Output:

This text has line over it

This text has line through middle

This is underlined text

This is blinking text

So, the output is what we desired but if you are using Internet Explorer, the last style, text-decoration: blink will not work. This command does not work in Internet Explorer.

Indent Text

The text can be indented by using the text-indent property. The value of this property can be specified either in units or as a percentage.
Example:

<html>
<head>
<style type="text/css">
div.units {text-indent: 50px}
p.perc {text-indent: 70%}
</style>
</head>

<body>
<div class="units">This is some text in a division.
We have indented text and the value is specified in pixel units.
Let's see how the text will look.
</div>
<p class="perc">This text is in a paragraph
The text is indented and the value is specified as a percentage.
Let's see the outcome
</p>
</body>
</html>

Output:

This is some text in a division. We have indented text and the value is specified in pixel units. Let's see how the text will look.

This text is in a paragraph The text is indented and the value is specified as a percentage. Let's see the outcome

Change Case of Text

By using the text-transform property, you can change the case of your text.
Example:

<html>
<head>
<style type="text/css">
div.upper {text-transform: uppercase}
p.lower {text-transform: lowercase}
div.cap {text-transform: capitalize}
p.none {text-transform: none}
</style>
</head>

<body>
<div class="upper">This text is in uppercase</div>
<p class="lower">This text is in lowercase</p>
<div class="cap">This text is in capitalcase</div>
<p class="none">This text will remain unchanged</p>
</body>
</html>

Output:

This text is in uppercase

This text is in lowercase

This text is in capitalcase

This text will remain unchanged

Set Direction of Text

The direction of the text can be set by using the property, direction.
Example:







This text is from right to left.
This text is from left to right. This is default.

Output:

This text is from right to left.
This text is from left to right. This is default.

CSS Tutorial