Delphinidin

- Line Height
The line-height property refers to the height of the line on which each line of text appears. The line-height property and its values are outlined in the following code.

{line-height: normal | <number> | <length> | <percentage> | inherit;}
initial value: normal

Example:
.intro {font-style: bold; line-height: 5;}

No matter which value type is used, line-height works in the same way: The value refers to the height of a line of text, from which the vertical space that the charters in the text take up is deducted. The remainder is then split in two, with half added to the top of the line of text and half to the bottom.

- Controlling The Spacing Between Letters
The letter-spacing property controls the amount of space between letters. The following code shows its values.

{letter-spacing: normal | <length> | inherit;}
Initial value: normal

Example:
.intro {letter-spacing: 0.2em;}

letter-spacing is a simple property that accepts a length as its value. A <length> value is any length value supported by CSS. Normal is the default value and is determined by the font being used. This is equal to a zero length value.The letter-spacing property may have either a positive or negative value. When given a negative value, letters are rendered closer together.

- Controlling The Spacing Between Words
The word-spacing property functions identically to the letter-spacing property. However, instead of controlling the space between letters, the word-spacing property controls the space between words. The following code shows its values.

{word-spacing: normal | <length> | inherit;}
Initial value: normal

Example:
.intro {word-spacing: 0.2em;}

Additionally, like the letter-spacing property, the word-spacing property can contain a negative value. If given a negative value, the effect is less space between each word.

- Indenting Text
Indenting text in CSS is done using the text-indent property. The text-indent property applied to a paragraph or any other element inserts the specifi ed length before the fi rst line of text, thus indenting the text. The following code shows this property’s values.

{text-indent:<length> | <percentage> | inherit;}
Initial value: 0

Example:
.intro {text-indent: 3em;}

The text-indent property accepts either a normal length value or a percentage value. This property can also accept a percentage width. The percentage width assigned by the text-indent property depends on the width of the element’s parent. For instance, if a <p> element were to be assigned a fixed width of 200 pixels and is inside a <div> with a width of 800px, the indention of the first line of the <p> element would be 80 pixels. It is rare to use percentage values because, as you can see, they are harder to control. Like the letter-spacing and word-spacing properties, the text-indent property can accept a negative value. In that case, the text will be shifted to the outside of the text, to the left in left-toright languages such as English.

- Horizontally Aligning Text
The purpose of the text-align property is simple: It aligns text! The following code outlines each of the values for the text-align property.

text-align left | right | center | justify
Initial value: left

Example:
h2 {text-align: center;}
.intro {text-align: justify;}

The text-align property has a number of keyword values that align text left or right or center it or justify it.

- Decorating Text With Underlines, Overlines,or Strikethrough
The text-decoration property applies underlining, overlining, and strikethrough to text. The following code outlines the text-decoration property and the values it allows.

{text-decoration: none | [ underline || overline || line-through || blink ];}
Initial value: none

Example:
.intro {text-decoration: underline;}

The text-decoration property is quite straightforward.The last value is blink, the usage of which has thankfully died out on most of the Web. Its purpose is to make text flash on and off. As you can imagine, this can be very annoying, not to mention an accessibility problem. Support for blink is poor in modern browsers and long may it stay that way!

It is possible to apply more than one text-decoration value; simply list them with a space between each (for example, text-decoration: underline line-through;). I strongly advise careful use of text-decoration; however, too much decoration makes text hard to read, and you should be careful not to confuse your website’s users. It is common for underlined text to be a link, so making non-link text underlined can be frustrating when users try to click it.

- Transforming Letter-Case To Lowercase Or Uppercase Or Capitalizing The Initial Characters Of Words
The text-transform property exists purely to manipulate the case of text (for instance, to capitalize or make all characters uppercase or lowercase). The following code shows the text-transform property and its values.

{text-transform: capitalize | uppercase | lowercase | none;}
Initial value: none

It is good practice to write all text in markup in the way you normally would if you were ignoring whatever typographical style your design demands. This way if the design changes it is a simple matter to change the CSS rather than having to change content, which could be spread throughout your site.

- Controlling How White Space Is Handled
The white-space property allows you to control text formatting in the source code of the web document. The following code outlines the keyword values of the white-space property as of CSS 2.

{white-space: normal | pre | nowrap;}
Initial value: normal

The white-space property is mainly used with the pre keyword value, and it used to output content exactly as it appears in your markup. With the white-space: pre; declaration, spaces and line breaks are preserved in the browser’s rendered output. By default, the browser will collapse the extra spaces between words and ignore the line breaks, which is the behavior of the white-space: normal; declaration. The white-space: pre; declaration preserves that extra space and keeps the line breaks where they appear in the source code.

Under normal circumstances, if there is too much text to appear on a single line, the extra text overflows onto the following line or lines. The white-space: nowrap; declaration prevents that overflow from happening and forces the text to stay on one line, unless an HTML line break <br> element is encountered. While it is not unheard of to see this declaration used, it is advisable that you don’t use it, as it can cause layout problems when your text overlaps or pushes other content out of the way!