CSS text-decoration property

Text properties enable you to arrange your web pages with greater precision. You can set the alignment, justification, indentation and character and line spacing etc. using these properties.

 CSS Text-Align

The TEXT-ALIGN property is used to align text within containing element or the browser window. The possible values that can be assigned to it are Left, Right, Center and Justify. For example:

P{Text-Align: left;} 
 H1{Text-Align: center;}

CSS Text-Decoration

The TEXT-DECORATION property is used to provide effect or decoration to the text. The possible values that can be assigned to it are

Value                    Purpose

None                       No effect (Default)

Underline                To put a line under the contents.

Overline                  To put a line over the top of contents.

line-through            Strike through i.e. cuts a line at the middle of text.

Blink                       Creates blinking text

P{Text-Decoration: Blink;}  
H1{Text-Decoration: Underline;}

CSS Text-Transform

The TEXT-TRANSFORM property is used to specify the case of text i.e. uppercase, lowercase or in capitals. The possible values that can be assigned to it are

Value                     Purpose

None                      No effect

Capitalize               First letter of each word is capitalized.

Uppercase             All letters converted to uppercase.

Lowercase             All letters converted to lowercase.

For example

P{Text-Transform: Uppercase ;}

CSS Letter-Spacing

The LETTER-SPACING property is used to specify the amount of space between letters. The possible values are normal or unit of length. The value of length can be positive or negative. For example:

p{ Letter-Spacing: 20px ;} 
 h1{ Letter-Spacing: Normal ;} 
 body{ Letter-Spacing: -10px ;}

CSS Word-Spacing

The WORD-SPACING property is used to specify the amount of space between words. The values are normal or unit of length. The value of length can be positive or negative. For Example:

P{ Letter-Spacing: 14px ;} 
 H1{ Letter-Spacing: Normal ;}

CSS Text-Indent

The TEXT-INDENT property is used to specify how much length the first line of text should be indented from the left side of the browser window or its containing element. The possible values that can be assigned to it are normal or values in length or percentage. The length can be positive or negative. For example:

P{Text-Indent: 20px ;}

CSS Text Color

The COLOR property is used to specify the color of the text i.e. foreground color. The values can be assigned using hexadecimal values, by their color names or by RGB notation. For example:

p {color: Red ;}  
h1 {color: #FF0066;}  
BODY {color: rgb(24, 155, 167);}

CSS Vertical-Align

The VERTICAL-ALIGN property is used to specify the vertical position of the element. It is generally used while working with inline elements such as images. The possible values that can be assigned to it are.

Value                   Purpose

baseline (default)Aligns the baseline of element with baseline of the parent element.

middle                  Aligns the vertical midpoint of the element (such as image) with the vertical midpoint of the parent.

sub                        Subscripts the element.

super                    Superscripts the element.

top                        Top of the element is aligned with the top of the tallest element on the line.

bottom                  Bottom of the element is aligned with the bottom of the lowest element on the line.

text-top                 Top of the element is aligned with the top of the pare,lt element.

text-bottom           Bottom of the element is aligned with the bottom of parent element.

Let us consider an example,

P{Vertical-Align  : sub;}  
H1{Vertical-Align  :top;}

CSS White-Space

The WHITE-SPACE property controls the whitespace perseverance within and between the elements. Normal, pre and nowrap values can be assigned to this property. For example:

P{White-Space: pre;}  
H1{White-Space:nowrap;}

CSS Line-Height

The LINE- HEIGHT property is used to specify the distance between two adjacent lines. The values that can be assigned to this property are normal or in terms of length specified in number or percentage. If numeric values are specified then height is the product of number and size of current element font size. If the height is specified in percentage then the values is multiplied by parent element’s font size. For example:

<html>  
<head>  
<title> Text Properties</title> 
 <style type='text/css'>  <!--  
p {text-indent: 20px; Iine-height: 2;}  
hl {text-align: center;  text-transform: uppercase;  text-decoration: underline;  }  
b {text-decoration: underline;  letter-spacing :20px;  color: #ffb066;  }  -->  
</style>  
</head>