The Text Properties

Lesson-8 (The Text Properties)

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

The letter-spacing property lets you Decide the amount of the space between letters in a section of text. The default is normal, but you can have a little fun if you want to....here is an example:

<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!

Each letter has 30 pixels between it and the next one.

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:

This text is aligned to the right in a 100 pixel box.

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=mc²

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:

And you would get the following:

This has a line over the top.

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

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

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

text-transform

Possible Values:
none
uppercase
lowercase

This property lets you change the case of your text without rewriting it. Great if you are using cut 'n' paste and someone wrote in ALL CAPS!

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

Now everything looks much nicer.....

THIS CHANGES EACH LETTER TO LOWERCASE.

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 pixels apart, you could write this:

<DIV style="line-height:30px">
This text has 30 pixels<BR> between each line.
</DIV>

And you get the following lines:

This text has 30 pixels
between each line.

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:

This text is indented
30 pixels on the first line.