| CSS Text | MoreCSS Text | CSS Structure | Images / Background | CSS Linking | Quick Reference |
There is a lot you can do with text using CSS. This next section deals with the properties available to change text in a paragraph block. There are six properties that allow greater control of text, text-align, text-indent, line height, word-spacing, letter-spacing, and vertical align.
The text align property works much like your word-processing program. Using its four values, left, right, center and justified, you can align your text in any of the common configurations. Left aligns text flush with the left margin. Right aligns to the right margin. With the center value, each line is centered in the middle of the box, the right and left margins are ragged. Justified aligns the text flush on both the right and left sides. Here is what the syntax looks like.
P {text-align: right}
Blockquote {text-align: justify}
The default alignment in browsers is left. Aligning right and justifying should be used with caution. Text aligned right or justified is difficult to read.
For years people have asked news groups and list services how to indent the first line of a paragraph. The common answer has been to use a non-breaking space. Now, with the text-indent property, designers can indent the first line of a paragraph. The property has two values, a length and a percent. An interesting effect can be achieved by using a negative text-indent value. Take a look at the syntax.
P {text-indent: 10 px}
P {text-indent: -5em}
The line-height property specifies the distance between lines of type in a paragraph. It has three values, a number, a length, and a percentage. The length value is absolute, while the number and percentage values are dependent on the size of the type. If you want to change the default, you will need to experiment to achieve the desired effect. Care should be taken when adjusting the line height to insure the text retains its readability.
Body {font size: 10 pt; line-height: 120%}
The word-spacing property allows you to adjust the amount of space between each word in a paragraph. There are two possible values, normal and a length. Fonts come with a default word spacing that the font designer determined was ideal. It is not likely you will be able to improve on the designer's tastes, but there are times you may find this property useful.
H1 {word-spacing: 20px}
P {word-spacing: 1em}
For the most part, the best letter spacing for a font is the default, or normal. On those rare occasions when there is some advantage to changing the spacing between letters of a word, you can use the letter-spacing property. Like its cousin, word-spacing, letter-spacing can ruin the readability of a block of text. Its use should be limited to titles and headings. Its values are normal or length.
P {letter-spacing: 1mm}
Blockquote {letter-spacing: 0.2em}
Most likely both word-spacing and letter-spacing will be effected with justified text. This is a good reason to use justified text sparingly.
The vertical align property allows you to raise or lower a letter, word line of text or an image above or below the baseline of the text. There are six values associated with the vertical-align property.
IMG. Initial {vertical-align: middle}
Sub {vertical-align: sub; font-size: 20pt}
With these two sections on text and CSS, you should be able to layout text on your web page that is pleasing to look at and yet remain readable. Keep in mind that clarity is the most important aspect of any web page. Gratuitous use of these effects can be counter-productive.
| CSS Text | MoreCSS Text | CSS Structure | Images / Background | CSS Linking | Quick Reference |