HTML&CSS · December 20, 2023

Css Basic: text-decoration-style

CSS Basic: text-decoration-style

CSS (Cascading Style Sheets) is a fundamental technology used to style and format web pages. It provides a wide range of properties and values that allow developers to customize the appearance of HTML elements. One such property is text-decoration-style, which controls the style of text decorations such as underlines, overlines, and line-throughs.

Understanding text-decoration-style

The text-decoration-style property specifies the style of the line that is used for text decorations. By default, the value is set to solid, which creates a solid line. However, there are other values available:

  • solid: This is the default value and creates a solid line.
  • double: This value creates a double line.
  • dotted: This value creates a series of dots.
  • dashed: This value creates a series of short dashes.
  • wavy: This value creates a wavy line.

Let's take a look at some examples to understand how text-decoration-style works.

Examples

Example 1: Using text-decoration-style: solid;


p {
  text-decoration: underline;
  text-decoration-style: solid;
}

In this example, the text will be underlined with a solid line.

Example 2: Using text-decoration-style: double;


p {
  text-decoration: underline;
  text-decoration-style: double;
}

In this example, the text will be underlined with a double line.

Example 3: Using text-decoration-style: dotted;


p {
  text-decoration: underline;
  text-decoration-style: dotted;
}

In this example, the text will be underlined with a series of dots.

Example 4: Using text-decoration-style: dashed;


p {
  text-decoration: underline;
  text-decoration-style: dashed;
}

In this example, the text will be underlined with a series of short dashes.

Example 5: Using text-decoration-style: wavy;


p {
  text-decoration: underline;
  text-decoration-style: wavy;
}

In this example, the text will be underlined with a wavy line.

Conclusion

The text-decoration-style property in CSS allows developers to control the style of text decorations. By using different values such as solid, double, dotted, dashed, or wavy, you can customize the appearance of underlines, overlines, and line-throughs. Experiment with these styles to enhance the visual appeal of your web pages.

For more information on VPS hosting solutions, visit Server.HK.

You may also like...