Style Text with CSS Text Properties

Introduction

In this lab, students will explore essential CSS text styling techniques to enhance web typography and readability. The lab covers five key text properties: line-height, text-indent, text-align, letter-spacing, and text-decoration. Participants will learn how to control vertical spacing between lines, create text indentations, align text, adjust character spacing, and apply decorative text styles.

Through hands-on examples and practical HTML/CSS demonstrations, learners will gain practical skills in manipulating text appearance and improving the visual presentation of web content. Each step provides clear instructions and code samples that illustrate the specific text styling property, enabling students to understand and implement these fundamental CSS text styling techniques effectively.

Set Line Height with line-height Property

In this step, you'll learn how to control the line height of text using the CSS line-height property. Line height is the vertical space between lines of text, which can significantly improve readability and text appearance.

First, let's create an HTML file to demonstrate line height styling. Open the WebIDE and create a new file named text-style.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Line Height Example</title>
    <style>
      .default-text {
        /* Default line height */
        line-height: normal;
      }

      .increased-line-height {
        /* Increased line height */
        line-height: 1.5;
      }

      .pixel-line-height {
        /* Fixed pixel line height */
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Line Height Demonstration</h1>

    <h2>Default Line Height</h2>
    <p class="default-text">
      This is a paragraph with default line height. Notice how the lines are
      spaced normally.
    </p>

    <h2>Increased Line Height</h2>
    <p class="increased-line-height">
      This paragraph uses a line height of 1.5, which provides more space
      between lines, making the text easier to read.
    </p>

    <h2>Fixed Pixel Line Height</h2>
    <p class="pixel-line-height">
      This paragraph has a fixed line height of 30 pixels. The spacing between
      lines is consistent and precisely controlled.
    </p>
  </body>
</html>

Let's break down the line-height property:

normal: Default browser line height
Numeric values (like 1.5): Multiplies the font size
Pixel values (like 30px): Fixed line height in pixels

Control Text Indentation with text-indent

In this step, you'll learn how to control text indentation using the CSS text-indent property. Text indentation allows you to create visual spacing at the beginning of paragraphs, which can improve readability and design aesthetics.

Let's continue with the previous HTML file. Open the text-style.html file in the WebIDE and modify the existing content to demonstrate text indentation:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Indentation Example</title>
    <style>
      .default-indent {
        /* Default text with no indentation */
        text-indent: 0;
      }

      .pixel-indent {
        /* Fixed pixel indentation */
        text-indent: 20px;
      }

      .percentage-indent {
        /* Percentage-based indentation */
        text-indent: 5%;
      }
    </style>
  </head>
  <body>
    <h1>Text Indentation Demonstration</h1>

    <h2>Default Text (No Indentation)</h2>
    <p class="default-indent">
      This paragraph starts at the left margin without any indentation. Notice
      how it begins right at the edge of its container.
    </p>

    <h2>Pixel-based Indentation</h2>
    <p class="pixel-indent">
      This paragraph has a fixed 20-pixel indentation. The first line is pushed
      20 pixels from the left margin.
    </p>

    <h2>Percentage-based Indentation</h2>
    <p class="percentage-indent">
      This paragraph uses a 5% indentation, which means the first line is
      indented relative to the width of its container.
    </p>
  </body>
</html>

The text-indent property allows three main types of indentation:

0: No indentation (default)
Pixel values (like 20px): Fixed indentation
Percentage values (like 5%): Relative to container width

Align Text Using text-align Property

In this step, you'll learn how to control text alignment using the CSS text-align property. Text alignment is crucial for creating visually appealing and readable layouts.

Let's continue modifying the text-style.html file in the WebIDE to demonstrate different text alignment options:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Alignment Example</title>
    <style>
      .left-align {
        /* Left-aligned text (default) */
        text-align: left;
      }

      .center-align {
        /* Centered text */
        text-align: center;
      }

      .right-align {
        /* Right-aligned text */
        text-align: right;
      }

      .justify-align {
        /* Justified text */
        text-align: justify;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h1>Text Alignment Demonstration</h1>

    <h2>Left-Aligned Text</h2>
    <p class="left-align">
      This paragraph is aligned to the left margin. This is the default
      alignment for most text.
    </p>

    <h2>Center-Aligned Text</h2>
    <p class="center-align">
      This paragraph is centered horizontally within its container.
    </p>

    <h2>Right-Aligned Text</h2>
    <p class="right-align">
      This paragraph is aligned to the right margin. Notice how it starts from
      the right side.
    </p>

    <h2>Justified Text</h2>
    <p class="justify-align">
      Justified text stretches to fill the entire width of its container,
      creating even edges on both the left and right sides.
    </p>
  </body>
</html>

The text-align property offers four main alignment options:

left: Aligns text to the left (default)
center: Centers text horizontally
right: Aligns text to the right
justify: Stretches text to fill the container width

Adjust Character Spacing with letter-spacing

In this step, you'll learn how to control character spacing using the CSS letter-spacing property. Character spacing allows you to adjust the distance between individual characters in a text, which can create unique typographic effects.

Continue editing the text-style.html file in the WebIDE to demonstrate different letter spacing options:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Letter Spacing Example</title>
    <style>
      .default-spacing {
        /* Default character spacing */
        letter-spacing: normal;
      }

      .tight-spacing {
        /* Negative letter spacing */
        letter-spacing: -1px;
      }

      .wide-spacing {
        /* Positive letter spacing */
        letter-spacing: 3px;
      }

      .heading-spacing {
        /* Spacing for headings */
        letter-spacing: 0.1em;
      }
    </style>
  </head>
  <body>
    <h1>Letter Spacing Demonstration</h1>

    <h2>Default Character Spacing</h2>
    <p class="default-spacing">
      This paragraph has normal character spacing. Each character is positioned
      at its default distance.
    </p>

    <h2>Tight Character Spacing</h2>
    <p class="tight-spacing">
      This paragraph uses negative letter spacing, bringing characters closer
      together.
    </p>

    <h2>Wide Character Spacing</h2>
    <p class="wide-spacing">
      This paragraph has increased letter spacing, spreading characters further
      apart.
    </p>

    <h2>Heading with Subtle Spacing</h2>
    <h3 class="heading-spacing">Stylish Heading with Subtle Letter Spacing</h3>
  </body>
</html>

The letter-spacing property offers three main options:

normal: Default character spacing
Negative values (like -1px): Tightens character spacing
Positive values (like 3px): Increases character spacing

Decorate Text with text-decoration

In this step, you'll learn how to add visual decorations to text using the CSS text-decoration property. Text decoration allows you to add underlines, overlines, and other stylistic effects to your text.

Continue editing the text-style.html file in the WebIDE to demonstrate different text decoration options:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Decoration Example</title>
    <style>
      .underline-text {
        /* Underline text */
        text-decoration: underline;
      }

      .overline-text {
        /* Overline text */
        text-decoration: overline;
      }

      .line-through-text {
        /* Line through text */
        text-decoration: line-through;
      }

      .multiple-decorations {
        /* Multiple text decorations */
        text-decoration: underline overline;
      }

      .colored-decoration {
        /* Colored text decoration */
        text-decoration: underline;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration Demonstration</h1>

    <h2>Underlined Text</h2>
    <p class="underline-text">This paragraph has an underline decoration.</p>

    <h2>Overlined Text</h2>
    <p class="overline-text">This paragraph has an overline decoration.</p>

    <h2>Line-Through Text</h2>
    <p class="line-through-text">
      This paragraph has a line-through decoration.
    </p>

    <h2>Multiple Decorations</h2>
    <p class="multiple-decorations">
      This paragraph has both underline and overline decorations.
    </p>

    <h2>Colored Decoration</h2>
    <p class="colored-decoration">
      This paragraph has a red underline decoration.
    </p>
  </body>
</html>

The text-decoration property offers several options:

underline: Adds a line below the text
overline: Adds a line above the text
line-through: Adds a line through the text
Multiple decorations can be combined
Decoration color can be customized

Summary

In this lab, participants learned how to enhance text styling using various CSS text properties. The first step focused on controlling line height with the line-height property, demonstrating different techniques such as using normal, numeric multipliers, and pixel values to improve text readability and appearance.

The lab explored multiple ways to manipulate text presentation, including setting line spacing, controlling text indentation, aligning text, adjusting character spacing, and adding text decorations. By practicing these CSS text properties, learners gained practical skills in creating more visually appealing and readable web typography.