facebook google plus twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: CSS Text

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

In this lesson, you will learn about CSS text.

Lesson Goals

  • Work with the letter-spacing property.
  • Work with the text-align property.
  • Work with the text-decoration property.
  • Work with the text-indent property.
  • Work with the text-shadow property.
  • Work with the text-transform property.
  • Work with the white-space property.
  • Work with the word-break property.
  • Work with the word-spacing 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 property either takes the keyword normal, which is the default defined by the current font and/or browser, or a length value. See the following example:

Code Sample:

CssText/Demos/letter-spacing-styles.css
#normal {
  letter-spacing: normal;
}

#wide {
  letter-spacing: 0.2rem;
}

#wider {
  letter-spacing: 0.4rem;
}

#widest {
  letter-spacing: 0.6rem;
}

Code Sample:

CssText/Demos/letter-spacing.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>letter-spacing</h1>
  <div id="normal">letter-spacing: normal;</div>
  <br>
  <div id="wide">letter-spacing: 0.2rem;</div>
  <br>
  <div id="wider">letter-spacing: 0.4rem;</div>
  <br>
  <div id="widest">letter-spacing: 0.6rem;</div>
</body>
</html>

Code Explanation

The code above will render the following:letter-spacing Demo

text-align

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

  • left
  • right
  • center
  • justify

Code Sample:

CssText/Demos/text-align-styles.css
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify;
}

Code Sample:

CssText/Demos/text-align.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>text-align</h1>
<div class="left">text-align:left</div>
<div class="center">text-align:center</div>
<div class="right">text-align:right</div>
<div class="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>
</body>
</html>

Code Explanation

The code above will render the following:text-align Demo

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 {
  text-decoration: none;
}

Code Sample:

CssText/Demos/text-decoration-styles.css
.none {
  text-decoration: none;
}

.overline {
  text-decoration: overline;
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

Code Sample:

CssText/Demos/text-decoration.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>text-decoration</h1>
  <div class="none">text-decoration: none</div>
  <div class="overline">text-decoration: overline</div>
  <div class="underline">text-decoration: underline</div>
  <div class="line-through">text-decoration: line-through</div>
  <div><a href="https://www.webucator.com" class="none">
    Webucator</a>
  </div>
</body>
</html>

Code Explanation

The code above will render the following:text-decoration Demo

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/text-indent-styles.css
.indent-length {
  text-indent: 3em;
}

.indent-percentage {
  text-indent: 10%;
}

.outdent-length {
  text-indent: -3em;
}

.outdent-percentage {
  text-indent: -10%;
}

Code Sample:

CssText/Demos/text-indent.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>text-indent</h1>
  <div class="indent-length">
    text-indent: 3em only applies to the first line of text.
    The next lines will not be indented.
  </div>
  <div class="indent-percentage">
    text-indent: 10% only applies to the first line of text.
    The next lines will not be indented.
  </div>
  <div class="outdent-length">
    text-indent: -3em only applies to the first line of text.
    The next lines will not be outdented.
  </div>
  <div class="outdent-percentage">
    text-indent: -10% only applies to the first line of text.
    The next lines will not be outdented.
  </div>
</body>
</html>

Code Explanation

The code above will render the following:text-indent Demo

text-shadow

The text-shadow property is used to add shadow to text. It can take a comma-delimited list of shadows, each described by a combination of x and y offsets, blur radius, and color. The syntax is shown below:

Syntax

text-shadow: x-offset y-offset blur-radius color /* shadow1 */, 
  x-offset y-offset blur-radius color /* shadow2 */, 
  x-offset y-offset blur-radius color /* shadow3 */

The values are explained below:

  1. x-offset and y-offset - These are both required length values. x-offset must come immediately before y-offset. x-offset specifies the horizontal displacement (positive values to the right and negative values to the left). y-offset specifies the vertical displacement (positive values below and negative values above). If both values are zero, the shadow will be directly behind the text.
  2. blur-radius - An optional length value that specifies the size of the blur effect. If included, this value must come after the two offset values.
  3. color - This is an optional color value that has to be either the first value included or the last value. If not included, the browser picks the color, so for consistency across browsers, it is a good idea to specify the shadow's color.

Code Sample:

CssText/Demos/text-shadow-styles.css
#simple-shadow {
  color: yellow;
  text-shadow: -.1rem -.1rem blue;
}

#blurred-shadow {
  text-shadow: .1rem .1rem .25rem red;
}

#double-shadow {
  color: red;
  text-shadow: .1rem .1rem white, 
    .2rem .2rem blue;
}

Code Sample:

CssText/Demos/text-shadow.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>text-shadow</h1>
  <h1 id="simple-shadow">Simple Shadow</h1>
  <h1 id="blurred-shadow">Blurred Shadow</h1>
  <h1 id="double-shadow">Double Shadow</h1>
</body>
</html>

Code Explanation

The code above will render the following:text-shadow Demo

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/text-transform-styles.css
#none {
  text-transform: none;
}

#caps {
  text-transform: capitalize;
}

#lower {
  text-transform: lowercase;
}

#upper {
  text-transform: uppercase;
}

Code Sample:

CssText/Demos/text-transform.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>text-transform</h1>
  <div id="none">text-transform: none;</div><br>
  <div id="caps">text-transform: capitalize;
    - this is written in all lowercase letters
  </div><br>
  <div id="lower">text-transform: lowercase;
    - THIS IS WRITTEN IN ALL UPPERCASE LETTERS
  </div><br>
  <div id="upper">text-transform: uppercase;
    - this is written in all lowercase letters
  </div>
</body>
</html>

Code Explanation

The code above will render the following:text-transform Demo

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
nowrap Yes Yes No
pre No No No
pre-line Yes No Yes
pre-wrap No No Yes

The following code sample shows the effects white-space:

Code Sample:

CssText/Demos/white-space-styles.css
#normal {
  white-space: normal;
}

#nowrap {
  white-space: nowrap;
}

#pre {
  white-space: pre;
}

#pre-line {
  white-space: pre-line;
}

#pre-wrap {
  white-space: pre-wrap;
}

Code Sample:

CssText/Demos/white-space.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>white-space</h1>
  <div id="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 id="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 id="pre">
    white-space: pre;
      white-space: pre;
        white-space: pre; white-space: pre; white-space: pre; white-space: pre; white-space: pre; 
  </div>
  <hr>
  <div id="pre-line">
    white-space: pre-line;
      white-space: pre-line;
        white-space: pre-line;
  </div>
  <hr>
  <div id="pre-wrap">
    white-space: pre-wrap;
      white-space: pre-wrap;
        white-space: pre-wrap; white-space: pre-wrap; white-space: pre-wrap; white-space: pre-wrap; white-space: pre-wrap; 
  </div>
</body>
</html>

Code Explanation

The code above will render the following:white-space Demo

word-break

The word-break property specifies where it is permissible to have line breaks when text would otherwise overflow its content box. The values are explained below:

  1. normal -- default line breaks (at the end of words or at hyphens)
  2. break-all -- line breaks can happen between any two characters

The following example shows the effects of word-break:

Code Sample:

CssText/Demos/word-break-styles.css
#div1 {
  word-break: normal;
}

#div2 {
  word-break: break-all;
}

Code Sample:

CssText/Demos/word-break.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>word-break</h1>
  <div id="div1">
    <p>
      word-break: normal; consecteturadipiscingelit. 
      Duisleolect-usauctorsed metus sed, blanditsuscipitjusto. 
      Phasellusultricesturpisatinciduntporta. Duispulvinarpr
      etiummassainblanditaecenasbibendumdignissimmagnaquislobortis.
    </p>
  </div>
  <hr>
  <div id="div2">
    <p>word-break: break-all; consecteturadipiscingelit. 
      Duisleolect-usauctorsed metus sed, blanditsuscipitjusto. 
      Phasellusultricesturpisatinciduntporta. Duispulvinarpr
      etiummassainblanditaecenasbibendumdignissimmagnaquislobortis.
    </p>
  </div>
</body>
</html>

Code Explanation

The code above will render the following:word-break Demo

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 property either takes the keyword normal, which is the default defined by the current font and/or browser, or a length value. See the following example:

Code Sample:

CssText/Demos/word-spacing-styles.css
#normal {
  word-spacing: normal;
}

#wide {
  word-spacing: 0.5rem;
}

#wider {
  word-spacing: 1rem;
}

#widest {
  word-spacing: 1.5rem;
}

Code Sample:

CssText/Demos/word-spacing.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>word-spacing</h1>
  <div id="normal">word-spacing: normal;
    - This is a normal sentence.
  </div><br>
  <div id="wide">word-spacing: 0.5rem;
    - This is a wide sentence. 
  </div><br>
  <div id="wider">word-spacing: 1rem;
    - This is an wider sentence. 
  </div><br>
  <div id="widest">word-spacing: 1.5rem;
    - This is the widest sentence. 
  </div>
</body>
</html>

Code Explanation

The code above will render the following:word-spacing Demo

Text Properties

Duration: 25 to 40 minutes.

In this exercise, you will continue to work on the Runners Home page that you started in the Fonts lesson.

  1. Open CssText/Exercises/index.html in your editor. You will see the homepage for a website called Runners Home.
  2. Open CssText/Exercises/styles.css. This is stylesheet from the solution to the Fonts exercise. Feel free to continue working from your own stylesheet.
  3. Using your new knowledge of text properties, add some styles to this page. The object of this exercise is to practice using the text properties covered in this lesson. Feel free to use color and opacity and any other properties you have learned as well.
  4. When you are done, open index.html in your browser to see the results. You are welcome to go back to the code and continue to work.

You can design it however you like, or you can try to make it look something like: Text Solution

Solution:

CssText/Solutions/styles.css
html {
  font-size: 16px;
}

body {
  font: 1rem/1.3 Verdana, Geneva, Tahoma, sans-serif;
}

nav a {
  text-decoration: none;
}

#welcome {
  font-size: larger;
}

#welcome h1 {
  color: rgb(8, 5, 211);
  text-shadow: 0.2rem 0.2rem 0.1rem rgb(211, 200, 238);
}

article {
  text-align: center;
}

article h2 {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  word-spacing: 0.2em;
}

article p {
  line-height: 2;
  text-align: left;
  text-indent: 3rem;
}

.read-more {
  text-decoration: none;
}

aside label {
  font-weight: bold;
}

#newsletter {
  text-align: right;
}

footer {
  font-size: smaller;
  font-style: italic;
}