Lesson Four

Since you were about six months old, your parents tried teaching you the basic forms of text. Words like "mama" and "dada" were probably your first words you could form. As you got older, the ABCs and 123s were the beginning visual text that you learned to read and write. As you began to speak the text you wrote or read, you'd form colorful variations of text with your voice. The only down side was, no matter which way you wrote the text, it never looked as colorful as you how you would say it. This is where we are going to explore.

If you've ever read a newspaper or magazine, you may have noticed that some lines have space between the letters and some are normal. This is called text spacing. It's used so that the columns are uniform in width from line to line. This is one of the many advantages cascading style sheets has over HTML. With CSS, you can easily adjust the space between individual letters (kerning), the space between letters in a word(tracking), the space between words, and the space between lines in a paragraph (leading). The more cumbersome way to achieve the same means in HTML is to use non-breaking spaces (&nbsp;) and the line break tag (<BR>). With CSS, this can be done two ways, either with the normal setting or a specific length setting. Below are examples of each:

letter-spacing: normal;

letter-spacing: -3px;

letter-spacing: 1.5em;

If you set the length value, you are setting the absolute space between letters. A negative value will close the space, a zero will do nothing, and a positive value will add space. The same process can be used to set the spacing between words. The only difference is the property name. Here is an example of word spacing:

word-spacing: 25px;

If you ever had to write a paper or essay in high school or college, you may remember using double-spacing between the lines in the paragraph. This too can be done four ways using cascading style sheets. You can use a number which will be multiplied by the font size to set the spacing. This can be done by just using a number such as 2, but it won't validate properly, so it's important to specify by using 2.0. The other three ways, length, percentage, and normal, will render the spacing according to the font size. Below are examples of how to set the line spacing.

line-height: 2.0;

line-height: 12px;

line-height: 50%;

Line spacing makes the text more legible. If you want to save space in your style sheet, you can define your line height at the same time as your font-size using the shorthand property.

You can also set the text case; for instance where you if you wanted to emphasize a title or header. There are four values for setting the text case: capitalize, uppercase, lowercase, or none. Here is an example of how to set the text case:

text-transform: uppercase;

If you've ever written a resume, you've definitely experimented with the justification of your text. You can align text horizontally four different ways; left, right, center, and justify. The rest are self-explanatory, but with justify, you align the text on both the left and right sides. Below are the four ways to define your text alignment:

text-align: left;

text-align: right;

text-align: center;

text-align: justify;

Aligning text vertically is a little different. You can specify the vertical position of one inline element relative to the elements around it. This means that you can only align text with inline or table tags like <A>, <IMG>, <B>, <I>, and <TD> tags without breaks before or after them. There are eight ways to vertically align text; super, sub, baseline, top, middle, bottom, text-top, and text-bottom. Here is an example of how to define vertical alignment:

vertical-align: super;

One thing you see in books that you may not see on many web sites, and hopefully they'll follow our example, is indented paragraphs. You can indent your paragraphs by typing text-indent: 2em;. If you use a length value like we did, you'll get a smooth indent. you can also use a percentage indent, which is proportionate to the width of the paragraph. If you don't want space between each paragraph, or you want extra space, you can set the paragraph margin by adding margin: 0px;. This will eliminate the space between paragraphs. Increments of 5 pixels should be used to set the spacing between your paragraphs.

Browsers tend to collapse multiple spaces into one space. With cascading style sheets, you can control the amount of white space as well as when text can break at a space by typing white-space: pre;. This will preserve multiple spaces. You can also use nowrap, which will prevent line wrapping without a <BR> tag, or normal, which allows the browser to determine how spaces are treated.

You can decorate your text by using the text-decoration: underline;. This places a line under the text as if it were a hyperlink only your visitors won't be able to go anywhere. You can also use overline, which places a line over the text, line-through, which places a line through the text like a strikethrough, blink, which causes the text to go on and off, and none, which overrides decorations set elsewhere.

Question: This is just like using a word processor. One thing though...you taught us how to alter text, but can you alter the background behind it like you can with HTML?

Answer: Good question. Yes, you can alter the background of your text as we'll see in the next lesson.