Text

Property Value
text-align left,center,right,justify
text-transform capitalize, lowercase, uppercase
text-indent First line indentation
text-decoration blink, line-through, none, overline, underline
word-spacing normal, length
letter-spacing normal, length
line-height normal, length, number, percentage
vertical-align baseline, sub, top, text-top, middle, bottom, text-bottom, percentage, length



Text Align

The horizontal alignment aligns the text right, left, centre and justify.


<p style="text-align:justify">
It is going to be cold outide but very warm inside because the central heating is on.If it is hot outside the central heating is off.
</p>

Displays

Justify Alignment
It is going to be cold outide but very warm inside because the central heating is on. If it is hot outside the central heating is off.





<head>
<style>
h3{text-align:left;}
h4{text-align:center;}
h5{text-align:right;}
</style>
</head>

<body>
<h3>h3 left alignment</h3>
<h4>h4 center alignment</h4>
<h5>h5 right alignment</h5>
</body>


Displays

h3 left alignment

h4 center alignment

h5 right alignment




Text Decoration


<head>
<style>
h4 {text-decoration:underline;}
h5 {text-decoration:line-through;}
p {text-decoration:overline;}
</style>
</head>

<body>
<p>Text is underlined.</p>
<p> Text is lined through.</p>
<p>Text is overlined.</p>
</body>

Displays

Text is underlined.

Text is lined through.

Text is overlined.





Text Indent

The text-indent property allows you to indent the first line of the text. The value can be in length e.g. 30px or you can use the percentage value e.g.70%.


<head>
<style>
p {text-Indent:30px;}
</head>
</style>


<body>
<p>First line of text is indented.
Second line is not indented.
Third line is not indented. </p>
</body>

Displays

First line of text is indented.
Second line is not indented.
Third line is not indented.





Text Transform


<head>
<style>
p.caps {text-transform:capitalization;}
p.lower {text-transform:lower-case;}
p.upper {text-transform:upper-case;}
</head>
</style>


<body>
<p class="caps">All the first letters are in capitals.</p>
<p class="upper">All the letters are in upper case.</p>
<p class="lower">All the letters are in lower case. </p>
</body>


Displays

All the first letters are in capitals.

All the letters are in upper case.

All the letters are in lower case.





Word Spacing

Word spacing does exactly what it says. It adds spacing between words. You can have a positive or negative value.



<head>
<style>
#p1{word-spacing:50px;}
#p2{word-spacing:-5px;}
</style>
</head>


<body>
<p id="p1"> The words have been spaced by 50px.</p>
<p id="p2"> The words have been spaced by -5px.</p>
<p>There is no word spacing in this sentence.</p>
</body>




Displays

The words have been spaced by 50px.

The words have been spaced by -5px.

There is no word spacing in this sentence.






Letter Spacing

Letter spacing allows you to have spacing between letters.


<head>
<style>
#p1{letter-spacing:2px;}
#p2{letter-spacing:-2px;}

</style>
</head>


<body>
<p id="p1">Letter Spacing of 2px.</p>
<p id="p2">Letter Spacing of -2px.</p>
<p>No letter spacing.</p>
</body>


Displays

Letter spacing of 2px.

Letter spacing of -2px.

No letter spacing.





Line Height

The line-height property lets you set a space between the lines.


<head>
<style>
p1{line-height:80px;}
p2{line-height:35px;}

</style>
</head>


<body>
<p id="p1">The space between the line below is 80px.</p>
<p id="p2">The space between the line below is 35px.</p>
<p>The space between the above line and this line is 35px</p>

</body>




Displays

The space between the line below is 80px.

The space between the line below is 35px.

The space between the above line and this line is 35px.






Vertical Align


<head>
<style>
#t1{vertical-align:top;}
#t2{vertical-align:middle;}
#t3{vertical-align:bottom;}
</style>
</head>

<body>
<table>
<tr>
<td id="t1">3</td>
<td id="t2">3</td>
<td id="t3">3</td>
</tr>
</table>
</body>

Displays

333







Now do the Exercise!