Text decoration and line height are vital for controlling the appearance and spacing of text. Text decoration adds visual markers like underlines, overlines, or strike-throughs to your text, while line height defines the vertical spacing between lines. Together, these properties help to improve readability and create emphasis where needed.

Syntax

Follow the code block below to set text decoration and line height in CSS:

/* Set text decoration */
text-decoration: none | underline | overline | line-through | blink;

/* Set line height */
line-height: normal | number | length | percentage;

Explanation:

• text-decoration:
  • Adds a visual effect to your text such as an underline, overline, or strike-through.
• line-height:
  • Controls the space between lines of text.
  • You can use keywords like normal, a numerical value (e.g., 1.5), fixed lengths (e.g., 20px), or a percentage (e.g., 150%).

Example 1: Underlined Text with Increased Line Height

In this example, we style a paragraph to have an underline text decoration and a larger line height for improved readability.

Explanation:

• Text Decoration:
  • The underline value adds a line below the text.
• Line Height:
  • The value 1.8 increases the spacing between lines relative to the font size.
• Outcome:
  • The text appears underlined and spaced out, creating a clear reading experience.

Example 2: Strike-through Text with Custom Line Height

In this example, we apply a strike-through effect to a heading and adjust the line height to demonstrate how different text decorations and line height settings change the text appearance.

Explanation:

• Text Decoration:
  • The line-through value draws a line across the text, creating a strike-through effect.
• Line Height:
  • A line height of 2 doubles the spacing between lines, which is useful for larger text or titles.
• Outcome:
  • The heading appears with a strike-through and clear spacing, which gives it a unique and noticeable style.

This lesson demonstrates how text decoration and line height can be applied to enhance the visual appearance of your text. By using these properties, you can create attractive and readable layouts for your web pages.