facebook google plus twitter
Webucator's Free CSS Tutorial

Lesson: CSS Text

Welcome to our free CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn to modify text CSS properties to modify spacing between letters, words, and lines and to underline and cross out text. You will also learn to specify how white space is handled.

Lesson Goals

  • Work with the letter-spacing property.
  • Work with the word-spacing property.
  • Work with the line-height property.
  • Work with the text-align property.
  • Work with the text-decoration property.
  • Work with the text-indent property.
  • Work with the text-transform property.
  • Work with the text-shadow property.
  • Work with the vertical-align property.
  • 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:

CssText/Demos/SpacingAndLineHeight.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Spacing and Line Height</title>
</head>
<body>
<div style="margin-left: 300px;">
<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.
</div>
</body>
</html>

The above code will render the following:Spacing and Line Height

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

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:

CssText/Demos/AlignDecorationAndIndent.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<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>

The above code will render the following:Text Alignment, Decoration, and Indentation

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:

CssText/Demos/TextTransform.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<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>

The above code will render the following:Text Transform

Text-shadow

The text-shadow property is used to add shadow to text. The property accepts the following values:

  • h-shadow - the position of the horizontal shadow; value can be negative (required)
  • v-shadow - the position of the vertical shadow; value can be negative (required)
  • blur-radius - the radius of the blur (optional; default is 0)
  • color - the color of the text shadow (optional)
  • none - no text shadow (default value)

Code Sample:

CssText/Demos/TextShadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Text-Shadow</title>
<style>
	body {
		font-size: 30px;
	}
	div {
		margin-bottom: 20px;
	}
</style>
</head>
<body>
<h1>Text-Shadow</h1>

<div style="text-shadow: none;">Text-Shadow: None</div>
<div style="text-shadow: 1px 1px 1px #00FF00;">Text-Shadow: 1px 1px 1px #00FF00</div>
<div style="text-shadow: 5px 0 3px #FF0000;">Text-Shadow: 5px 0 3px #FF0000</div>
<div style="text-shadow: 2px 2px 5px #0000FF;">Text-Shadow: 2px 2px 5px #0000FF</div>
<div style="text-shadow: 0 0 10px #FF00FF;">Text-Shadow: 0 0 10px #FF00FF</div>
</body>
</html>

The above code will render the following:Text Shadow Note that in the last example with horizontal and vertical shadow position set to 0 and a greater-than-0 value for the blur, we can achieve a glow effect.

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:

CssText/Demos/VerticalAlign.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<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>

The above code will render the following:Vertical Align

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:

CssText/Demos/WhiteSpace.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<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>

The above code will render the following:White Space

Text Properties

Duration: 10 to 20 minutes.

In this exercise, you will continue to work on Stories.html by applying text properties to different elements on the page.

  1. Open CssText/Exercises/Stories.html.
  2. Modify the text properties of the different elements on the page. You may do this using inline styles, an embedded style sheet, and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with these CSS text properties.
  3. When you are done, open CssText/Exercises/Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

CssText/Solutions/Stories.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Stories</title>
<style>
	h1
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
		letter-spacing: .25em;
		word-spacing: .4em;
		text-shadow: 2px 2px 2px #666;
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
		line-height: 1.2;
		text-indent: 2em;
	}
	
	a
	{
		font-style: italic;
		font-weight: bold;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
	
	.BackToTop
	{
		text-align: right;
		display: block;
		text-decoration: none;
		text-transform: capitalize;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>

<p>Pooh always liked a little something 
---- C O D E   O M I T T E D ----
and said to himself 'Silly Old Bear!'</p>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>

<p>There was a table set out under a tree
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
 and you know, too, how ill-behaved he is!</p>
<a href="#top" class="BackToTop">Back to top</a>
</body>
</html>