CSS Tutorial >> CSS Text.

CSS Tutorial will guide us now that CSS text formatting and adding style is a key issue for any web developer. Here in CSS Text section you will be introduced to the amazing opportunities Cascading Style Sheet gives you to add layout to text on your web pages. The following properties will be described in details...

• CSS Word Spacing
• CSS Letter Spacing
• CSS Text Decoration
• Vertical Alignment IN CSS
• CSS Text Transformation
• Text Alignment of CSS
• CSS Text Indentation
• Line Height using CSS

The spacing between characters in a web page can be specified using the property of word-spacing in Cascading Style Sheet. The value of the property word-spacing is simply the desired width. For example, if you want a spacing of 3px between the words in a text paragraph <p> and 5px between words in headlines <h4>the code below could be used.
 

Syntax:	word-spacing: <value>
Possible Values:	normal | <length>
Default Value:	normal
Applies to:	All elements
Inherited:	Yes

P      { word-spacing: 3px }
h4     { word-spacing: 5px }

CSS word-spacing property defines an additional amount of space between words in a web page. In CSS word spacing value must be in the length format for words; and negative values are also permitted.

CSS Letter spacing between text characters can be specified using the property of Cascading Style Sheet "letter-spacing". The value for this property is simply the desired width. Suppose, if you want a spacing of -4px between the letters in a text paragraph <p> and 8px between letters in headlines <h4>the code below could be used.
 

Syntax:	letter-spacing: <value>
Possible Values:	normal | <length>
Default Value:	normal
Applies to:	All elements
Inherited:	Yes

p     { letter-spacing: -4px }
h4    { letter-spacing: 8px }

CSS letter-spacing property defines an additional amount of space between characters in a web page. This CSS property value must be in the length format also; and negative values are permitted here. A setting of 0 will prevent justification for text.

CSS text-decoration property makes it is possible to add different decorations or  effects to text in your web page. For example, you can underline some text, have a line through or above the text using CSS Text Decoration property, etc. In the following example, <p> are underlined paragraph, and <h4> are headlines with a line above the text and <h2> are headlines with a line though the text.
 

Syntax:	text-decoration: <value>
Possible Values:	none | [ underline || overline || line-through || blink ]
Default Value:	none
Applies to:	All elements
Inherited:	No

p   { text-decoration: underline}
h4   { text-decoration: overline}
h2   { text-decoration: line-through}

Cascading Style Sheet property of text-decoration allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none in your web pages.

CSS property of text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centered. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines etc.
 

Syntax:	vertical-align: <value>
Possible Values:	baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Default Value:	baseline
Applies to:	Inline elements
Inherited:	No

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50%    }
.exponent  { vertical-align: super  }

The CSS vertical-align property can be used to alter the vertical positioning of an inline elements, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be in percentage relative to the element's line-height property in CSS, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are also permitted here.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element in CSS text Alignment.:

• baseline (align baselines of element and parent)
• middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
• sub (subscript)
• super (superscript)
• text-top (align tops of element and parent's font)
• text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

• top (align top of element with tallest element on the line)
• bottom (align bottom of element with lowest element on the line)

Now CSS Tutorial will teach us that CSS text property of text-transform controls the capitalization of a text in a webpage. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:

capitalize

Capitalizes the first letter of each word. For example: "john smith" will be "John Smith".

uppercase

Converts all letters to uppercase. For example: "john smith" will be "JOHN SMITH".

lowercase

Converts all letters to lowercase. For example: "JOHN SMITH" will be "john smith".

none

No transformations - the text is presented as it appears in the HTML code.

As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

Syntax:	text-transform: <value>
Possible Values:	none | capitalize | uppercase | lowercase
Default Value:	none
Applies to:	All elements
Inherited:	Yes

 
Try to take a look at the HTML code for this example and you will see that the headings actually is in uppercase and capitalized form.

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

CSS text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

CSS text-align property corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the right, to the left or centered. In addition to this in Cascading Style Sheet, the value of justify will stretch each line so that both the right and left margins are straight. Hope you know this layout from for example newspapers and magazines. In the example below the text in table headings <th> is aligned to the right while the table data <td> are centered. In addition, normal text paragraphs are justified:
 

Syntax:	text-align: <value>
Possible Values:	left | right | center | justify
Default Value:	Determined by browser
Applies to:	Block-level elements
Inherited:	Yes

th          { text-align: right   }
td          { text-align: center  }
P           { text-align: justify }

CSS text-align property can be applied to block-level elements (P, H1, DIV, TH, TD etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

CSS text-indent property allows us to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 15px is applied to all text paragraphs marked with
 

Syntax:	text-indent: <value>
Possible Values:	<length> | <percentage>
Default Value:	0
Applies to:	Block-level elements
Inherited:	Yes

P { text-indent: 15px }

CSS property of text-indent can be applied to block-level elements like (DIV, H2, TD etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

CSS line-height property will accept a value to control the spacing between baselines of text in a webpage. When the value is a number, the line height is calculated by multiplying the element's font size by the numbers. Percentage values are relative to the element's font size. Negative values are not permitted here in Cascading Style Sheet Line Height property.
 

Syntax:	line-height: <value>
Possible Values:	normal | <number> | <length> | <percentage>
Default Value:	normal
Applies to:	All elements
Inherited:	Yes

P { line-height: 200% }

Line height in CSS may also be given in the font property of CSS along with a font size.
In CSS the line-height property could be used to double space text also: