CSS Text

In this lesson of the CSS tutorial, you will learn...
  1. To work with the letter-spacing property.
  2. To work with the word-spacing property.
  3. To work with the line-height property.
  4. To work with the text-align property.
  5. To work with the text-decoration property.
  6. To work with the text-indent property.
  7. To work with the text-transform property.
  8. To work with the vertical-align property.
  9. To work with the white-space property.

Letter-spacing

The letter-spacing property is used to specify the amount of space between letters. The amount indicated is in addition to the default spacing. The amount is specified in units. For example,

<div style="letter-spacing:1em">It's a wide wide word!</div>

Word-spacing

The word-spacing property is used to specify the amount of space between words. The amount indicated is in addition to the default spacing. The amount is specified in units. For example,

<div style="word-spacing:1em">It's a wide wide sentence!</div>

Line-height

The line-height property is used to specify the amount of vertical space between lines of text. The line-height can be specified in number of units, percentage, or with a multiplier.

The following code sample shows the effects of letter-spacing, word-spacing, and line-height.

Code Sample: Text/Demos/SpacingAndLineHeight.html

<html>
<head>
<title>Spacing and Line Height</title>
</head>
<body>
<h1>Spacing and Line Height</h1>

<h2>Letter Spacing</h2>
<div style="letter-spacing:1em">letter-spacing:1em</div>
<div style="letter-spacing:-1em">letter-spacing:-1em</div>

<h2>Word Spacing</h2>
<div style="word-spacing: 1em">word-spacing: 1em</div>
<div style="word-spacing: 1em">It's a wide wide sentence.</div>

<h2>Line Height</h2>
<div style="line-height:1.5">
 line-height:1.5<br />
 line-height:1.5<br />
 line-height:1.5
</div>
<div style="line-height:150%">
 line-height:150%<br />
 line-height:150%<br />
 line-height:150%
</div>
<div style="line-height:1.5em">
 line-height:1.5em<br />
 line-height:1.5em<br />
 line-height:1.5em
</div>
<hr>
See <a href="LineHeight.html">LineHeight.html</a> 
 for another demo of line-height.
</body>
</html>
Code Explanation

The above code will render the following:

Text-align

The text-align property is used to specify how inline content should be aligned within a block. The values are listed below.

  • left
  • right
  • center
  • justify

Text-decoration

The text-decoration property is used to add effects to text, such as underlines and line-throughs. The values are listed below.

  • none
  • underline
  • overline
  • line-through
  • blink

The none value of the text-decoration property can be used to remove the underline from links, as shown below.

<a href="http://www.webucator.com"
   style="text-decoration:none">Webucator</a>

Text-indent

The text-indent property is used to indent (or outdent) the first line of a block of text. The value can be specified in number of units or in percentage of the width of the containing block.

The following code sample shows the effects of text-align, text-decoration, and text-indent.

Code Sample: Text/Demos/AlignDecorationAndIndent.html

<html>
<head>
<title>Text-Align, Text-Decoration and Text-Indent</title>
</head>
<body>
<h1>Text-Align, Text-Decoration and Text-Indent</h1>
<h2>Text-Align</h2>
<div style="text-align:left">text-align:left</div>
<div style="text-align:center">text-align:center</div>
<div style="text-align:right">text-align:right</div>
<div style="text-align:justify">
 text-align:justify - to see the effect of justify, 
  the text block has to wrap
 text-align:justify - to see the effect of justify, 
  the text block has to wrap
 text-align:justify - to see the effect of justify, 
  the text block has to wrap
</div>

<h2>Text-Decoration</h2>
<div style="text-decoration:none">text-decoration:none</div>
<div style="text-decoration:overline">text-decoration:overline</div>
<div style="text-decoration:underline">text-decoration:underline</div>
<div style="text-decoration:blink">text-decoration:blink</div>
<div style="text-decoration:line-through">text-decoration:line-through</div>
<div><a href="http://www.webucator.com" 
  style="text-decoration:none">Webucator</a></div>

<h2>Text-Indent</h2>
<div style="text-indent:50px">
 text-indent:50px - text-indent only applies to the first line of text.<br/>
 The next lines will not be indented.
</div>
<div style="text-indent:10%">
 text-indent:10% - text-indent only applies to the first line of text.<br/>
 The next lines will not be indented.
</div>

</body>
</html>
Code Explanation

The above code will render the following:

Text-transform

The text-transform property is used to change the capitalization of text. The values are listed below.

  • none
  • capitalize
  • uppercase
  • lowercase

The following code sample shows the effects text-transform.

Code Sample: Text/Demos/TextTransform.html

<html>
<head>
<title>Text-Transform</title>
</head>
<body>
<h1>Text-Transform</h1>

<div style="text-transform:none;">Text-Transform: None</div>
<div style="text-transform:capitalize;">Text-Transform: Capitalize 
   - this is written in all lowercase letters</div>
<div style="text-transform:lowercase;">Text-Transform: Lowercase</div>
<div style="text-transform:uppercase;">Text-Transform: Uppercase</div>

</body>
</html>
Code Explanation

The above code will render the following:

Vertical-align

The vertical-align property is used to indicate how inline content should be aligned vertically relative to sibling inline content. The values are listed below.

  • bottom
  • middle
  • top
  • text-bottom
  • baseline
  • text-top
  • sub
  • super

The following code sample shows the effects vertical-align.

Code Sample: Text/Demos/VerticalAlign.html

<html>
<head>
<title>Vertical-Align</title>
</head>
<body>
<h1>Vertical-Align</h1>

<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 <img src="Images/block.gif" width="100" height="100" 
  alt="block" style="vertical-align:bottom;" />
 vertical-align:bottom
</div>
<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 <img src="Images/block.gif" width="100" height="100" 
  alt="block" style="vertical-align:middle;" />
 vertical-align:middle
</div>
<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 <img src="Images/block.gif" width="100" height="100" 
  alt="block" style="vertical-align:top;" />
 vertical-align:top
</div>

<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 <img src="Images/block.gif" width="100" height="100" 
  alt="block" style="vertical-align:text-bottom;" />
 vertical-align:text-bottom
</div>
<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 <img src="Images/block.gif" width="100" height="100" 
  alt="block" style="vertical-align:baseline;" />
 vertical-align:baseline
</div>
<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 <img src="Images/block.gif" width="100" height="100" 
  alt="block" style="vertical-align:text-top;" />
 vertical-align:text-top
</div>

<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 vertical-align:<span style="vertical-align:sub; color:blue;">sub</span>
</div>
<div style="border-top:1px solid red;
   border-bottom:1px solid red; font-size:1.5em">
 vertical-align:<span style="vertical-align:super; color:blue;">super</span>
</div>

</body>
</html>
Code Explanation

The above code will render the following:

White-space

The white-space property determines how sequences of whitespace are displayed. The following table shows the values and their effects.

white-space Values
Property Collapses Series of Spaces and/or Tabs in Code Collapses Line Breaks in Code Wraps to Fit Containing Box
normal Yes Yes Yes
pre No No No
nowrap Yes Yes No

The following code sample shows the effects white-space.

Code Sample: Text/Demos/WhiteSpace.html

<html>
<head>
<title>White-Space</title>
</head>
<body>

<h1>White-Space</h1>

<div style="white-space:normal;">
 white-space:normal
 white-space:normal
 white-space:normal white-space:normal white-space:normal white-space:normal 
 white-space:normal white-space:normal
</div>
<hr/>
<div style="white-space:nowrap;">
 white-space:nowrap
 white-space:nowrap
 white-space:nowrap white-space:nowrap white-space:nowrap white-space:nowrap 
 white-space:nowrap white-space:nowrap
</div>
<hr/>
<div style="white-space:pre;">
 white-space:pre
  white-space:pre
   white-space:pre
</div>

</body>
</html>
Code Explanation

The above code will render the following:

CSS Text Conclusion

In this lesson of the CSS tutorial, you have learned to use CSS text properties.

To continue to learn CSS go to the top of this page and click on the next lesson in this CSS Tutorial's Table of Contents.

Use of this website implies agreement to the following:

Copyright Information

All pages and graphics on this Web site are the property of Webucator, Inc. unless otherwise specified.

None of the content on this website may be redistributed or reproduced in any way, shape, or form without written permission from Webucator, Inc.

No Printing or saving of web pages

This content may not be printed or saved. It is for online use only.

Linking to this website

You may link to any of the pages on this website; however, you may not include the content in a frame or iframe without written permission from Webucator, Inc.

Warranties

This website is provided without warranty of any kind. There are no guarantees that use of the site will not be subject to interruptions. All direct or indirect risk related to use of the site is borne entirely by the user. All code and explanations provided on this site are provided without warranties to correctness, performance, fitness, merchantability, and/or any other warranty (whether expressed or implied).

For individual private use only

You agree not to use this online manual to deliver or receive training. If you are delivering or attending a class that is making use of this online manual, you are in violation of our terms of service. Please report any abuse to courseware@webucator.com. If you would like to deliver or receive training using this manual, please fill out the form at http://www.webucator.com/Contact.cfm.