CSS Texts Decorations

In CSS, you can apply various text decorations to modify the appearance of text. Here are the different text decoration properties you can use:

1. Text Decoration Line (text-decoration-line): This property specifies the type of decoration to be applied to the text. It can take the following values:

   • none: No text decoration.

   • underline: Adds a line underneath the text.

   • overline: Adds a line over the text.

   • line-through: Adds a line through the text.

   • underline overline: Adds lines both underneath and over the text.

   • initial: Sets the value to its default value.

   • inherit: Inherits the value from its parent element.

2. Example usage:
   
   

p {

  text-decoration-line: underline;

}

Text Decoration Style (text-decoration-style): This property specifies the style of the text decoration lines. It can take the following values:

• solid: Solid lines.

• double: Double lines.

• dotted: Dotted lines.

• dashed: Dashed lines.

• wavy: Wavy lines.

Example usage:

p {

  text-decoration-line: underline;

  text-decoration-style: dashed;

}

Text Decoration Color (text-decoration-color): This property sets the color of the text decoration lines. It can take any valid color value.
Example usage:

p {

  text-decoration-line: underline;

  text-decoration-color: red;

}

Text Decoration Skip Ink (text-decoration-skip-ink): This property controls the rendering of text decoration when characters with descenders (e.g., "g", "j") are present. It can take the following values:

• none: No characters are skipped.

• auto: Characters with descenders are skipped to prevent overlapping of the decoration lines.

Example usage:

p {

  text-decoration-line: underline;

  text-decoration-skip-ink: auto;

}

Shorthand (text-decoration): You can use the shorthand text-decoration property to set multiple text decoration properties at once. It accepts values for line, style, color, and skip ink.
Example usage:

p {

  text-decoration: underline dotted red;

}

These are the primary CSS properties related to text decorations. By using these properties, you can add various decorative effects to your text and enhance its visual presentation.