Slacker's Guide to HTML: Text Properties in CSS

CSS Text Properties

Word-spacing
Letter-spacing
Text-decoration
Vertical-align
Text-transform
Text-align
Text-indent
Line-height

Text Properties in stylesheets are very versatile. You can change any number of things, such as word-spacing, letter-spacing, text-decoration, vertical-alignment, text-transform, text-align, text-indent, and line-height.

We will cover all of those properties and all of the things you can do with those properties on this page, and we will do them in order. So let's start off with word-spacing.

Word Spacing

Word-spacing is the amount of white space in between strings of connected characters (also known as words). The word "orange" is a string of 6 characters, just like "t400GH" is a string of 6 characters.

You can manipulate the amount of space between words quite easily. First we will cover the simplest way to change (or actually, NOT change) the amount of space between words. That is the normal setting:

listing {word-spacing: normal;}

In the example above the word-spacing is set to it's normal (default) setting. There is no practical point in using this setting because unless your text is already set to be abnormally spaced, this tag is just reinforcing what your browser should do automatically.

p {word-spacing: 5em;}

In this example you can see that the words enclosed inside the paragraph tag (p) will have a space of 5em in between the words. Just as you can use the em unit for a measurement of white space you can also use centimeters (cm) and inches (in) and pixels (px) and points(pt).

Letter Spacing

Letter spacing is the amount of white space in between any displayed character. In the word "apple" there are 5 displayed characters. Supposing you set the letter-spacing to 200% the word apple would look like this:

a p p l e

Setting letter-spacing is simple. Look at this easy example below, in which I am setting the letter-spacing inside the underline tag to be 12 points, which is a lot for letter-spacing.

u {letter-spacing: 12pt;}

Also, just like many properties, you can use relative settings to adjust your text. Using points and pixels and such are absolute settings because 12 points will always be 12 points. 200%, though, will not always look the same. If you have text whose default setting is 20 pixels and if you set the letter-spacing to 200% then the spacing will be 40 pixels. If you have 10 pixel text and you double the letter-spacing (200%) then the spacing will be 20 pixels. As you can see, in both examples the letter-spacing is 200%, but that produces different results.

Here is an example of letter-spacing with the relative setting, which can only be a percentage.

q {letter-spacing: 50%;}

In that example the letter spacing inside the q tag is half (50%) of what the text around it is.

Text Decoration

Text-decoration is another way to say what you want, or don't want, to do with the text on your web page. Now, let's assume that you want all the blinking text on your page to also be underlined. To define that with style sheets you would write this code out:

blink {text-decoration: underline;}

As the code says, the text enclosed in the blink tag will also be underlined. There are other options to text-decoration, too. You could use any one of the following:

none
underline
overline
line-through
blink

One trick many people use the text-decoration style for is to remove the underline from links. You could do that with this code:

a {text-decoration: none;}

Vertical Align

Vertical alignment is interesting. Vertical alignment sets the vertical alignment of an element's baseline with respect to its parent element's line-height.

So, vertical alignment, in other words, is the amount of vertical space between two elements. Check this out:

<p>
The cats in the cradle and
<blockquote>
the silver spoon
</blockquote>
little boy blue..
</p>

See how the blockquote tag is nested inside the paragraph (p) tag? Well, that means that the blockquote tag is the child element of the paragraph tag and the paragraph tag is the parent element of the blockquote tag.

Anyway, so if I used the stylesheets code below then the blockquote text would appear as a ^superscript compared to the normal paragraph text.

blockquote {vertical-align: super;}

OK. The other choices for vertical align are as follows:

baseline
sub
super
too
text-top
middle
bottom
text-bottom
%

As you may or may not have guessed, when using a percentage to denote what the vertical-align will be remember that percentages usually signify a relative, not absolute, position.

Text Transform

Text-transform is used to change the settings of a whole set of text. You can make all the text capitalized, uppercase, lowercare, or you can reiterate it's default settings. Look:

caption {text-transform: uppercase;}

In this example all the text within the caption tag will be automatically turned into uppercase text, no matter how it was when you originally wrote it. The following could be used as settings with the text-transform style:

capitalize
lowercase
uppercase
none

Text Align

Text-align is the text alignment setting in stylesheets. Check it out:

cite {text-align: justify;}

In that example code the cite tag would automatically justify it's text. All the options for the text align style are:

left
right
center
justify

Text Indent

The text-indent style is used most often on the first line of a paragraph to indent it, but this style can easily be used on anything. This style needs to have a percentage or length unit to work - so brush up on your measurement. Remember: pixels, points, inches, centimeters are all good. And percentages work by indenting the text a preentage of the length of the whole block of text. If the text is 3 inches wide and you have 33% indentation on the first line, then the first line will start 1 inch into the text block.

Here is some example code:

b {text-indent: 3em;}
h5 {text-indent: 70%;}

As you can see, all the text inside the bold tag is indented 3 em's and the header 5 tag is indented 70%.

Line Height

Line-height is the setting that changes the amount of white space between lines in a block of text. The white space that line height deals with is the vertical space, word-spacing is what deals with the space in between words horizontally.

Look at this sample code below:

samp {line-height: normal;}
samp {line-height: 200%;}
samp {line-height:  4in;}
samp {line-height: 3;}

In those four examples I showed you the four ways to signify line-height. The first way is through the normal setting, which just reinforces the default browser setting.
The second part of the example code shows the percentage way. This way you can set the line height to be 200% (or any %) as much as the surrounding text's line-height.
The third way is the unit of measurement way. With this method you denote the line height with a unit of measurement.
The fourth way is the number system. By changing the number value you can thus change the line-height.

And that wraps up the text properties section on CSS.