Text properties

-          Color

We have already discussed the color property in earlier post “Color and background properties”

-          letter- spacing

The letter-spacing property specifies the spacing between the characters. This property is applicable to all elements. Its values are “normal” or length .

letter-spacing: normal   or

letter-spacing: 2em or

letter-spacing:  0.5em

Sample output for letter-spacing is :

T h I s  s a m p l e  t e x t   w I t h  l e t t e r – s p a c I n g   I n   s t y l e

-          text-align

                The text align property specify the horizontal alignment for text enclosed in element. The values for this property are “left”, “right”, “center”,”justify”.

text-align: left

-          vertical-align

vertical-align property specifies the vertical alignment property for text. The values for this property are

Value	Descrption
top	Aligns the text to top of the element.
Bottom	Aligns the text to bottom of the element
Middle	Aligns the text to middle of the element
Sub	Aligns the text as a subscript in element for example: t2
Super	Aligns the text as a superscript in element, for example: X2
Baseline	Aligns the baseline of element and parent
text-top	Aligns top of element and parents font
text-bottom	Aligns bottom of the element and parents font
Length	With this we can assign any value with unit or %

Example:

Vertical-align: 1cm

Vertical-align: 10%

-          text-decoration

The text decoration property allows you to put underline with the characters or strike out any word/sentence in the element. Also allows you to provide any over line or make it blink

This property has the value “none”, “underline”, “overline”, “blink( supported only in FireFox)”, “line-through”

Example

 text-decoration: none

-          text-transform

This property allows you to transform the text using one of the following values:

Value	Description
None	No transformation will be applied to the text
uppercase	The text will transformed into uppercase characters
lowercase	The text will be transformed into the lower case characters
Capitalize	Transform first character of every word into uppercase

Example:

Text-decoration: lowercase

-         text-indent

This property is useful with the block level elements such as <p>. Using this property we can define the indentation for first line of the text.

For this property we have to specify the length in units.

For Example:

text-indent: 5cm

-          white-space

The white-space property decides how the blank space in the element handled. This property allows to control line-break and spacing inside the element.

Following are the values for this property:

Value	Description
normal	This is the default value. The text will wrap whenever necessary.
nowrap	The text will not wrap and will remain in a single line
pre	This is similar to the <pre> tag. The text only wraps on the line breaks.

-          Word-spacing

This property defines the spacing between the words in the element. The value must be in a length format.

Example :

P  { white-space: 2em}

-          line-height

  The line height property helps to decide the spacing between the lines in the given element.

Following are the values of the line-height property:

o   normal

o   number

o   %

P  { line-height: 2px}