CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



text-decoration-style

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS is used to style web pages and applications, and it provides a wide range of properties to customize the appearance of text and other elements. One of these properties is text-decoration-style, which is used to specify the style of the line that appears beneath or above text.

Brief Explanation of Text-Decoration-Style

The text-decoration-style property is used to specify the style of the line that appears beneath or above text. This property is often used in conjunction with the text-decoration-line property, which is used to specify the type of line that appears beneath or above text. The text-decoration-style property can be used to specify one of the following values:

  • solid: This value specifies a solid line.
  • double: This value specifies a double line.
  • dotted: This value specifies a dotted line.
  • dashed: This value specifies a dashed line.
  • wavy: This value specifies a wavy line.

The default value of the text-decoration-style property is solid.

Code Examples

Here are some examples of how to use the text-decoration-style property:

Example 1: Solid Line

In this example, we will create a solid line beneath the text:

  
    <p style="text-decoration-line: underline; text-decoration-style: solid;">This is a solid line.</p>
  

This is a solid line.

Example 2: Double Line

In this example, we will create a double line beneath the text:

  
    <p style="text-decoration-line: underline; text-decoration-style: double;">This is a double line.</p>
  

This is a double line.

Example 3: Dotted Line

In this example, we will create a dotted line beneath the text:

  
    <p style="text-decoration-line: underline; text-decoration-style: dotted;">This is a dotted line.</p>
  

This is a dotted line.

Example 4: Dashed Line

In this example, we will create a dashed line beneath the text:

  
    <p style="text-decoration-line: underline; text-decoration-style: dashed;">This is a dashed line.</p>
  

This is a dashed line.

Example 5: Wavy Line

In this example, we will create a wavy line beneath the text:

  
    <p style="text-decoration-line: underline; text-decoration-style: wavy;">This is a wavy line.</p>
  

This is a wavy line.

Conclusion

The text-decoration-style property is a useful CSS property that can be used to customize the appearance of the line that appears beneath or above text. By using this property, you can create solid, double, dotted, dashed, or wavy lines that can help to enhance the visual appeal of your web pages and applications.

References

Activity