Styling Text Using CSS

Styling Text Using CSS

You can style text using CSS for spacing, case, horizontal alignment, vertical alignment, and decoration.

1. Text Spacing

CSS gives you the ability to easily adjust text spacing, including the space between individual letters, words, and lines of text in a paragraph.

Tracking is the amount of space between letters in a word, which, in CSS, is controlled with the letter-spacing property. More space between letters often improves text readability. On the other hand, too much space can hamper reading by making individual words appear less distinct.

Word spacing adjustments can both help and hinder legibility, adding a little space between words on the screen using the word-spacing property can make your text easier to read. But too much space interrupts the path of the reader's eye across the screen and interferes with reading.

The line-height property adds space between the text baselines (the bottoms of most letters). Generally, a line height of 1.5 to 2 times the font size is appropriate.

2. Text Case

When you are dealing with dynamically generated output, such as from a database, you can never be sure whether the text will appear in uppercase, lowercase, or a combination of the two. With the text-transform property, you can control the ultimate case of the text no matter how it begins.

  • capitalize sets the first letter of each word to uppercase.
  • uppercase forces all letters to uppercase.
  • lowercase forces all letters to lowercase.
  • none overrides inherited text-case values and leaves the text unaltered.

3. Aligning Text Horizontally

Traditionally, text is aligned at its left margin (left justified) or fully justified, which aligns the text at both the left and right margins (often called newspaper style). In addition, for emphasis or special effect, text can be centered on the screen or even right justified. The text-align property gives you control of the text’s alignment and justification.

You can set one of the following alignment styles:

  • left to align the text on the left margin.
  • right to align the text on the right margin.
  • center to center the text within its area.
  • justify to align the text on both the left and right margins.
  • inherit makes the text take its parents’ alignment.
  • auto uses the default alignment, generally left.

4. Aligning Text Vertically

Using the vertical-align property, you can specify the vertical position of one inline element relative to the elements above or below it. This means that the vertical-align property be used only with inline tags and table tags such as the anchor (<a>), image (<img>), emphasized text (<em>), strong text (<strong>), and table data (<td>) tags.

  • top: Top to highest element in line
  • middle: Middle to middle of parent
  • bottom: Bottom to lowest element in line

5. Decorating Text

Using the text-decoration property, you can adorn text in one of three ways: underline, overline, or line-through. Used to add emphasis, these decorations attract the reader's eye to important areas or passages on your web page.

  • underline places a line below the text.
  • overline places a line above the text.
  • line-through places a line through the middle of the text (also called strike through).
  • none overrides decorations set elsewhere.

6. Text Color

The color property is used to set the text color of an element. This color is inherited by all of the element’s children, so you need only set it once in the body element and then provide overrides as needed.