CSS Text

Alignment

The text-align property is used to set the horizontal alignment of a text. A text can be left, right, center or justified aligned.

The following example shows text aligned left, center, right and justified. Left is the default when the alignment is not specified.

text-align:left;	text-align:center;	text-align:right;	text-align:justify;
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'	In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'	In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'	In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
	When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

To vertically align our horizontally aligned text we must apply padding to the element containing the text. Padding creates extra space within an element, while margin creates extra space around an element.

The padding property can have from one to four values. When zero is assigned that position only has no padding. Negative values are not allowed

If the property has four values:	If the property has three values:	If the property has two values:	If the property has one value:
padding:50px 5px 15px 20px; top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px	padding:10px 5px 50px; top padding is 10px right and left padding are 5px bottom padding is 50px	padding:50px 5px; top and bottom padding are 50px left and right padding are 5px;	padding:50px; all four paddings are 50px

padding:50px 5px 15px 20px;	padding:10px 5px 50px;	padding:50px 5px;	padding:50px;
My father gave good advice to me	My father gave good advice to me	My father gave good advice to me	My father gave good advice to me

Positioning and Styling

The simplest way to position text is to place it in a table. That way the text may also be styled as to color, size, background, decoration etc. Below are three blocks of text to illustrate these text attributes. The text that will be used is the code that created the blocks. Absolute positioning is always measured from the top left of the screen which is left:0px;top:0px;. The format used will be...

<div id=ex-number>
<table class=ex-number>
<tr><td>text</td>
</tr></table>

#ex-1{
position:absolute;left:100px;top:1320px;
}
.tableex-1 td{
background:#000000;color:#ffffff;
width:200px;font-zize:18px;font-weight:bold;
text-align:justify;
}

#ex-2{
position:absolute;left:500px;top:1420px;
}
.tableex-2 td{
background:#7FFFD4;color:#008000;
width:300px;font-zize:16px;font-weight:bold;
text-decoration:underline;
text-align:justify;
}

#ex-2{
position:absolute;left:700px;top:1300px;
}
.tableex-3 td{
background:#ff00ff;color:#faf0e6;
width:400px;font-zize:22px;font-weight:bold;
font-style:italic;
text-align:justify;
}

Let me point out that this is not the definitive book on CSS text but just a chapter to maybe interest the reader to try some of these basic techniques.