How to work with Text Property of Cascading Style Sheets

To work with Text Property of Cascading Style Sheets

The Text tab of the CSS Selector Inspector lets you define spacing, case, and alignment properties for the current style.

To edit the text spacing, case, and alignment properties:

Step 1.

• Select a style in the Style Sheet window, and click on the Text tab in the CSS Selector Inspector.

Step 2.

• To set the text indent, choose a length unit or a percentage from the Units pop-up menu, and type an indentation in the Text Indent text box, and then press Enter.

Step 3.

• To set the word spacing (add to the default word spacing), choose a length unit from the Units pop-up menu, type a number in the Word Spacing text box, and then press Enter.

Step 4.

• To set letter spacing (adding to the default space between letters), choose a length unit from the Units pop-up menu and type a number in the Letter Spacing text box, and then press Enter.

Step 5.

• To set vertical alignment (the vertical positioning) of an element, you ought to type in a value and choose an option from the pop-up menu:

  1. Baseline aligns the baseline of the element with the baseline of the parent element.
     

  2. Sub subscripts the element.
     

  3. Super superscripts the element.
     

  4. Top aligns the top of the element with the tallest element on the line (relative to the formatted line that the element is a part of).
     

  5. Text Top aligns the top of the element with the top of the parent element’s font.
     

  6. Middle aligns the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent.
     

  7. Bottom aligns the bottom of the element with the lowest element on the line (relative to the formatted line that the element is a part of).
     

  8. Text Bottom aligns the bottom of the element with the bottom of the parent element’s font.

Step 6.

• To set the small caps, you have to choose the Small Caps from the Font Variant pop-up menu.

Step 7.

• To set the text case (Capitalize, Uppercase, or Lowercase), you have to choose an option from the Transformation pop-up menu.

Step 8.

• To set the text alignment (Left, Center, Right, and Justify), you have to choose an option from the Alignment pop-up menu.