CSS Basics 104 -Text with CSS

Home Tutorials Reviews Weblog

Featuring: Starting look at text and controlling its alignment, spacing, and indenting in CSS
Motivation: All styles are applied to text lines using <div> and <span> tags

Samples of CSS style rules that will be explained in the tutorial below:

Text Indenting and Spacing Styles
.lspace {letter-spacing: 0.2em; background-color: #cc7799;} 
.padent { text-indent: 2em; padding-left:4px;}

.wordspace { word-spacing: 2em; background-color: lime; }
Text Horizontal Alignment Styles
.textleft { text-align: left;}
.textright { text-align: right;}
.textjustify { text-align: justify;}
.textcenter { text-align: center;}

Text Vertical Alignment Styles
.vsub { vertical-align: sub; background-color: #aaaaff }
.vsuper { vertical-align: super; background-color: yellow; }
.vtop { vertical-align: sub; background-color: yellow; }
.vupercent { vertical-align: 80%; background-color: yellow; }

.vdownpercent { vertical-align: -80%; background-color: #aaaaff ; }
.vupixels { vertical-align: 8px; background-color: yellow; }
.vdownpixels { vertical-align: -8px; background-color: #aaaaff ; }

As a writer, I highly value the ability to be able to control my text and wording very closely. I really welcomed DTP processing because it allowed me to control not just type and font settings but also text spacing, indenting, text-decoration, alignment - the whole works. When I turned to the Web that sense of control was already waning with the inconsistencies of word processors - and it really plummeted with the early Web browsers and support tools.

That is why full implementation of CSS is so important because it gives very close to basic DTP-Desktop Publishing control to Web developers. I am alarmed that the Microsoft IE browser developers, 10 years after saying they would implement the complete CSS standards, still have not done so. Readers should seriously consider an alternative browser like Firefox 3 (currently the fastest and most feature rich browser) or Opera or Safari.

Near DTP performance is most evident in the text CSS stylings. Lets take indenting spacing of both letters and words. CSS provides precise control of all three. Watch in the paragraph below where we add indenting with .padent and the two spacing styles .

Text Indenting and Spacing

The <span> and <div> Tags

The two tags are both containers for text , especially <span>. However they differ in one critical aspect. <span> is like a great long snaking line of text in which padding and margin settings apply to just the head and tail. All the other lines, even if they have left and right borders, just ignore any margin or padding settings. In contrast, <div> is like the true CSS text box container - it applies padding, margin, and border stylings and is being used to create this very sidebar tip.

As noted, this paragraph uses the .padent style which indents the first line of text by 2em - or about 4 characters. I am testing this indent styling out and may apply it to all my <p>, <body>, <td> and other tags as a default setting in my osstyle.css file. Note that it also uses a padding of 4 pixels as well. See what happens when we don't apply padding just below.

Note how the text in this paragraph is jammed flush next to the tip's border. It looks cramped. Instead we need to stretch things out by applying a wider 0.2em spacing between letters as we have done in this sentence by using the .lspace style. The option is letter-space: 0.2em. The result is a flow to the words which appears more spacious and breezy.

Now lets apply the .wordspace style and see how that effects our document when the word spacing goes on a glide like trip. This fails to show in the Dreamweaver CS3 Design preview; but it certainly does work in all 4 of our Windows-based browsers - Apple Safari, Microsoft IE6, Mozilla Firefox 3 and Opera 9. So far the text stylings have worked pretty uniformly in all 4 browsers.

Text Alignment Styles

CSS allows Web developers to control text alignment both horizontally and vertically. Again for style and emphasis this can be quite useful for a writer to help make a point. In this section, the 4 horizontal alignments are demonstrated in each succeeding paragraph with two vertical alignments

First, left-justified is styled with the option text-align: left; - and this paragraph uses that styling. In addition we provide examples of sub or below the baseline the option is vertical-align: sub; and then super - above the baseline settings whose style option is vertical-align: super; . Note what happens to the whole line - it gets expanded to accommodate the vertical alignments. Also note that these vertical alignments fail to show in the Dreamweaver CS3 preview and Firefox is very skimpy on the amount of the vertical alignments.

Second, right-justified is styled with the option text-align: right; - and this paragraph uses that styling. Note how the lines evenly match up on the right margin. In addition 2 more vertical alignments by pixel setting are tried in this paragraph. A vertical-align: 8px is used right here. Then a vertical-align: -8px is used deliberately over two lines here. The results are notable. By specifying a numerical pixel amount of vertical alignment, the resulting changes in all 4 browsers are much more uniform.

Third, a justified style is used with the option text-align: justified - and like in the blue tip on <span> and <div> above, the justified paragraph has a more even look especially at the borders. For vertical alignment we use four stylings. vertical-align: 80% is used here followed by vertical-align: top done right here. Then the pair, vertical-align: -80% is used here followed by vertical-align: bottom done right here. What top and bottom do is move the text up in the case of top to the highest vertical-alignment setting in that line - or vice versa for bottom. Note what happens when we repeat vertical-align: bottom in this line here. Nada - which is exactly what one wants.

Last, a center justified style is used with the option text-align: center - and like the right justified styling it looks a bit strange to the eye. No vertical alignment changes are made in this paragraph. All of the browsers did well with these text stylings with the notable exception of IE6. For most of our tests IE6 matched all of the other browsers; but then it suddenly broke down and did some wild re-alignments after adding the vertical-align percent stylings. I have added some HTML hacks to prevent this - but IE users may want to switch to Firefox or Opera to get better (and faster) CSS renditions.

Summary

The bulk of CSS style rules and options involve text styling in some form. It is such a pleasure to have not just margin and padding but letter and word spacing, alignment and positioning under creative control. Yet, as shown, the rules themselves are fairly simple and easy to use. Check the next tutorial for more tips on text stylings. Users looking for more info on these CSS styles should check pages 70-75 in the book CSS in Easy Steps by Mike McGrath or pages 131-145 in CSS: The Definitive Guide 3d Edition by Eric Meyer.


Top of Page  Tutorials Home  CSS references