Here are some explanations and examples of the css text properties. Some of these do not yet work in Netscape. You may want to use IE4 to view the examples on this page.

Now it is time to look at the text properties. These will allow you to change alignment and spacing etc. We'll start with letter-spacing:

letter-spacing

Possible Values:
number of pixels
normal

<DIV style="letter-spacing:30px">Each letter has 30 pixels between it and the next one.</DIV>

Now you will get some really spaced-out text!

text-align

Possible Values:
left
right
center
justify

The text-align property allows you to adjust the text alignment in a section of text. So, if you would like some text aligned to the right, you would do this:

<DIV style="text-align:right; width:100px">
This text is aligned to the right in a 100 pixel box.
</DIV>

And you would get this text, aligned to the right:

vertical-align

Possible Values:
baseline
sub
super
top
text-top
middle
bottom
text-bottom

This defines the vertical alignment for a section of text. Useful for subscripts and exponents. The default is baseline, where you see most everything in the first place. If you want to use an exponent, you would use it this way:

E=mc<SPAN style="vertical-align:super">2</SPAN>

And you get the old famous equation:

E=mc2

As you can see, it acted just like the <SUP> tag. The "sub" option would act like the <SUB> tag...the rest are for you to test out and see what happens. I'm feeling a bit lazy at the moment.....

text-decoration

Possible Values:
none
underline
overline
line-through
blink

This lets you add certain features to a section of text such as underline, line-through, etc. So, lets suppose that for some reason you wanted a line over the top of some of your text...You would write the following:

<DIV style="text-decoration:overline">This has a line over the top.</DIV>

And you would get the following:

This is also used as a method for taking the underline off of your link text:

<A HREF="csstut7.php" style="text-decoration:none">Click Here!</A>

Now your link will have no underline!

Click Here!

So now you can put those links without underlines on your page and surprise everyone!

text-transform

Possible Values:
none
uppercase
lowercase

<DIV style="text-transform:lowercase">
THIS CHANGES EACH LETTER TO LOWERCASE.
</DIV>

Now everything looks much nicer.....

Ah, yes....now it is all in lowercase!

line-height

Possible Values:
normal
number of pixels
percentage

This lets you change the amount of space between lines of text. So, if you want each line to be 30 <DIV style="line-height:30px">
This text has 30 pixels<BR> between each line.
</DIV>

And you get the following lines:

Try it at 600 pixels and see if anyone will scroll an entire page to read the next line!

text-indent

Possible Values:
number of pixels
percentage

This defines the indention of the first line in a section of text. So, if you need to indent a section by 30 pixels, do this:

<DIV style="text-indent:30px">This text is indented <BR>30 pixels on the first line.</DIV>

And this is what you get:

Well, that's the section on the text properties, at least for now. Let's go on to the next section: Using the Font Properties.