Tuesday, October 30, 2012

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}