Configuring Text

The texts cover a large portion of Web pages. Styling the text may improve the appearance of web pages and can draw attention to certain elements of the text.

letter-spacing

The letter-spacing property controls the spacing of each character in a word.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>letter-spacing</title>
 <style type="text/css"><!--
 #idp { letter-spacing: 4px; }
 --></style>
</head>
<body>
 <p id="idp">Web site: CoursesWeb.net</p>
</body>
</html>
  - Result:

Web site: CoursesWeb.net

word-spacing

The word-spacing property increase or decrease the space between words.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>word-spacing</title>
 <style type="text/css"><!--
 #idp { word-spacing: 0.5em; }
 --></style>
</head>
<body>
 <p id="idp">Free courses and tutorials.</p>
</body>
</html>
  - Result:

Free courses and tutorials.

line-height

The line-height property sets the distance between lines.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>line-height</title>
 <style type="text/css"><!--
 #idp { line-height: 150%; }
 --></style>
</head>
<body>
 <p id="idp">First line text<br />
 A second line ...<br />
 Another line in the paragraph.</p>
</body>
</html>
  - Result:

First line text
A second line ...
Another line in the paragraph.


Line height can also be defined in the "font-size" property by introducing the character "/" followed by the value for the height of the line, immediately after the font size.
                  E.g.:     p { font-size:12px/28px; }

text-transform

The text-transform controls the capitalization of text.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>text-transform</title>
 <style type="text/css"><!--
 #idp { text-transform: capitalize; }
 --></style>
</head>
<body>
 <p id="idp">free CSS course and lessons.</p>
</body>
</html>
  - Result:

free CSS course and lessons.

text-align

The text-align defines the horizontal alignment of text inside a containing block.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>text-align</title>
 <style type="text/css"><!--
 #idp1 { text-align: right; }
 #idp2 { text-align: center; }
 --></style>
</head>
<body>
 <p id="idp1">Text with right align.</p>
 <p id="idp2">Paragraph with center align.</p>
</body>
</html>
  - Result:

Text with right align.

Paragraph with center align.

vertical-align

The vertical-align sets the alignment of text (or other inline content) in relation to the line box controlled via line-height.
Because this property controls the positioning of an inline element in relation to a line box and not a block element, it is not suitable for aligning block elements in a layout grid.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>vertical-align</title>
 <style type="text/css"><!--
 .sp1 { vertical-align: sub; }
 .sp2 { vertical-align: super; }
 --></style>
</head>
<body>
 <p>Some text: <span class="sp1">sub span</span> and a <span class="sp2">super span</span> sub-string.</p>
</body>
</html>
  - Result:

Some text: sub span and a super span sub-string

text-indent

The text-indent defines an indentation for the first line of text in a block.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>text-indent</title>
 <style type="text/css"><!--
 p { text-indent: 20px; }
 --></style>
</head>
<body>
 <p>The first line of the paragraph, with indentation,<br />
 The second line ...</p>
</body>
</html>
  - Result:

The first line of the paragraph, with indentation,
The second line ...

text-decoration

Via the text-decoration property you can set underlines, strikethrough, or other text decorations (even blink).
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>text-decoration</title>
 <style type="text/css"><!--
 .sp1 { text-decoration: underline; }
 .sp2 { text-decoration: overline; }
 .sp3 { text-decoration: line-through; }
 --></style>
</head>
<body>
 <p>Some text: <span class="sp1">underline span</span>, a <span class="sp2">overline text</span> and a <span class="sp3">line-through</span> sub-string.</p>
</body>
</html>
  - Result:

Some text: underline span, a overline text and a line-through sub-string.

white-space

The white-space sets how white space inside an element is handled.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>white-space</title>
 <style type="text/css"><!--
 p { white-space: pre; }
 --></style>
</head>
<body>
 <p>The first line of the     paragraph with   more spaces    between     words.
 The second line, without <br> tag.</p>
</body>
</html>
  - Result:

The first line of the paragraph with more spaces between words. The second line, without <br> tag.

word-wrap

With word-wrap you can allow browsers to break lines in the middle of words to prevent long strings of characters from overflowing a box.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>word-wrap</title>
 <style type="text/css"><!--
 p {
  width: 88px;
  word-wrap: break-word;
 }
 --></style>
</head>
<body>
 <p>Short paragraph with looooooooonnnnnnggggg wwwoooooorrrrrddddddsssss.</p>
</body>
</html>
  - Result:

Short paragraph with looooooooonnnnnnggggg wwwoooooorrrrrddddddsssss.

text-shadow

The text-shadow property introduced in CSS3 allows for one or more shadow effects to be applied to the text of an element. This shadow is drawn around the letters themselves (not supported in Internet Explorer).
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>text-shadow</title>
 <style type="text/css"><!--
 h4 { text-shadow: 3px 5px 2px green; }
 --></style>
</head>
<body>
 <h4>Web site: www.MarPlo.net</h4>
</body>
</html>
  - Result:

Web site: www.MarPlo.net