CSS Text Decoration :A Guide to Decorate the text

Contents

CSS Text Decoration

CSS text decoration is a property in CSS that allows you to add visual effects to text.

It can be used to underline, overline, strike through, or add a line through the text.

It allows you to add or remove text decorations such as underline, overline, line-through, and more.

The text-decoration property can accept multiple values separated by spaces to combine different text decorations.

Here’s a summary of the different values that can be used with the text-decoration property:

CSS Text Decoration values

text-decoration: none;	This value removes any text decoration from the text.
text-decoration: underline;	This value adds a horizontal line below the text.
text-decoration: overline;	This value adds a horizontal line above the text.
text-decoration: line-through;	his value adds a horizontal line through the text, effectively striking it out.
text-decoration: underline overline;	This value adds both an underline and an overline to the text.
text-decoration: underline line-through;	This value adds both an underline and a line-through effect to the text.

In addition to the basic text decoration styles, you can further customize the appearance by using other CSS properties in combination with text-decoration.

For example, you can change the color of the text decoration line using the text-decoration-color property or adjust the line thickness with the text-decoration-thickness property (note that browser support for these properties may vary).

How to use text decoration to an HTML element using CSS?

Here’s an example of how you can apply text decoration to an HTML element using CSS:

.text-decoration-example {
  text-decoration: underline;
}

This is an underlined text.

In the above example, the text “This is an underlined text.” will be displayed with an underline effect.

How to use text-decoration: none ?

Here’s a complete HTML code example that uses the text-decoration: none; property to remove text decoration from an HTML element:

1)create HTML file (tes.t.html: open notepad the write the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .no-decoration {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <p class="no-decoration">This text has no decoration.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .no-decoration targets the element and applies the text-decoration: none; property to remove any text decoration.

2-The text within the paragraph will be displayed without any additional visual effects.

2) open the tes.html file by any wen browser to see the following result :

How to use text-decoration: underline?

Here’s a complete HTML code example that uses the text-decoration: underline; property to add an underline to an HTML element:

Do the previous step 1 and step 2:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .underline {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p class="underline">This text has an underline.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .underline targets the element and applies the text-decoration: underline; property to add an underline effect to the text within the paragraph.

2-The text will be displayed with a horizontal line below it, indicating an underline.

How to use text-decoration: overline?

Here’s a complete HTML code example that uses the text-decoration: overline; property to add an overline to an HTML element:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .overline {
      text-decoration: overline;
    }
  </style>
</head>
<body>
  <p class="overline">This text has an overline.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .overline targets the element and applies the text-decoration: overline; property to add an overline effect to the text within the paragraph.

2-The text will be displayed with a horizontal line above it, indicating an overline.

How to use text-decoration: line-through?

Here’s a complete HTML code example that uses the text-decoration: line-through; property to add a line-through effect to an HTML element:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .line-through {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <p class="line-through">This text has a line-through.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .line-through targets the element and applies the text-decoration: line-through; property to add a line-through effect to the text within the paragraph.

2-The text will be displayed with a horizontal line through it, indicating a line-through effect.

How to use text-decoration: underline overline ?

Here’s a complete HTML code example that uses the text-decoration: underline overline; property to add both an underline and an overline to an HTML element:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .underline-overline {
      text-decoration: underline overline;
    }
  </style>
</head>
<body>
  <p class="underline-overline">This text has both underline and overline.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .underline-overline targets the element and applies the text-decoration: underline overline; property to add both an underline and an overline effect to the text within the paragraph.

2-The text will be displayed with both a horizontal line below it (underline) and a horizontal line above it (overline).

How to use text-decoration : underline line-through?

Here’s a complete HTML code example that uses the text-decoration: underline line-through; property to add both an underline and a line-through effect to an HTML element:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .underline-line-through {
      text-decoration: underline line-through;
    }
  </style>
</head>
<body>
  <p class="underline-line-through">This text has both underline and line-through.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .underline-line-through targets the element and applies the text-decoration: underline line-through; property to add both an underline and a line-through effect to the text within the paragraph.

2-The text will be displayed with a horizontal line below it (underline) and a horizontal line through it (line-through).

How to use text-decoration-color ?

The text-decoration-color property is used to set the color of the text decoration line. Here’s a complete HTML code example that demonstrates the usage of text-decoration-color along with text-decoration: underline; to add an underlined text with a specific color:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Color Example</title>
  <style>
    .underline {
      text-decoration: underline;
      text-decoration-color: red;
    }
  </style>
</head>
<body>
  <p class="underline">This underlined text has a red color.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .underline targets the element and applies the text-decoration: underline; property to add an underline effect to the text.

2-Additionally, the text-decoration-color: red; property sets the color of the underline to red.

3-The text will be displayed with a red-colored underline. You can replace red with any valid CSS color value like hexadecimal, RGB, or color name to achieve the desired color.

How to use text-decoration-style ?

The text-decoration-style property is used to define the style of the text decoration line, such as solid, dotted, dashed, etc.

Here’s a complete HTML code example that demonstrates the usage of text-decoration-style along with text-decoration: underline; to add an underlined text with a specific style:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Style Example</title>
  <style>
    .underline {
      text-decoration: underline;
      text-decoration-style: dashed;
    }
  </style>
</head>
<body>
  <p class="underline">This underlined text has a dashed line style.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS selector .underline targets the element and applies the text-decoration: underline; property to add an underline effect to the text.

2-Additionally, the text-decoration-style: dashed; property sets the style of the underline to dashed.

3-The text will be displayed with an underlined style using dashed lines.

4-You can replace dashed with other values like solid, dotted, double, etc., to achieve different line styles.

Here’s an example that demonstrates the usage of the text-decoration property:

.text-decoration-example {

text-decoration: underline;

}

This is an underlined text.

Explanation:

In the above example, the CSS class .text-decoration-example applies the text-decoration: underline; property to the element, resulting in the text being displayed with an underline effect.

You can combine the text-decoration property with other CSS properties like text-decoration-color and text-decoration-style to further customize the appearance of the text decorations, but note that browser support may vary for these additional properties.

How to add under line decoration and color to a text ?

Here’s a complete HTML code example that adds an underline decoration line with a specific color to a text:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .underline {
      text-decoration: underline;
      text-decoration-color: red;
    }
  </style>
</head>
<body>
  <p class="underline">This text has an underline with a red color.</p>
</body>
</html>

Explanation:

1-In the above example, the CSS class .underline is defined and applies the text-decoration: underline; property to the element, which adds an underline decoration line below the text within the paragraph.

2-Additionally, the text-decoration-color: red; property sets the color of the underline to red.

3-The text “This text has an underline with a red color.” will be displayed with a red-colored underline.

Application by this lesson

Here’s an example of how you can apply the lessons learned about text decoration in HTML and CSS to a practical scenario:

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    .highlight {
      text-decoration: underline;
      text-decoration-color: blue;
    }
    
    .strikethrough {
      text-decoration: line-through;
      text-decoration-color: red;
    }
  </style>
</head>
<body>
  <h1>Welcome to our Online Store</h1>
  
  <p class="highlight">Check out our <a href="#">special offers</a> this week!</p>
  
  <h2>Featured Products</h2>
  
  <ul>
    <li class="highlight">Product 1</li>
    <li>Product 2</li>
    <li class="highlight">Product 3</li>
    <li class="strikethrough">Product 4 (Out of stock)</li>
  </ul>
  
  <p class="strikethrough">Limited time offer: <span class="highlight">free shipping</span> on all orders!</p>
</body>
</html>

Explanation:

In the above example:

1-The .highlight CSS class is used to add an underline decoration with a blue color to the text. It is applied to the “special offers” link, the “Product 1” and “Product 3” list items, and the “free shipping” span.

2-The .strikethrough CSS class is used to add a line-through decoration with a red color to the text. It is applied to the “Product 4” list item and the “Limited time offer” paragraph.

By using these CSS classes, you can emphasize specific elements of your web page, such as important links, featured products, or promotional messages, by adding appropriate text decorations.

Quiz with answers

Here’s a multiple-choice quiz with answers based on the lesson about text decoration in HTML and CSS:

1-What CSS property is used to apply text decoration effects?

a) font-weight

b) text-decoration

c) text-transform

d) line-height

Answer: b) text-decoration

2-Which value of the text-decoration property is used to add an underline effect?

a) none

b) underline

c) overline

d) line-through

Answer: b) underline

3-How can you specify the color of the text decoration line?

a) Using the text-decoration-color property

b) Using the color property

c) Using the text-color property

d) It is not possible to change the color of the text decoration line

Answer: a) Using the text-decoration-color property

4-What is the purpose of the text-decoration-style property?

a) To specify the font style of the text

b) To control the thickness of the text decoration line

c) To define the style of the text decoration line (e.g., solid, dashed, etc.)

d) To adjust the spacing between characters in the text

Answer: c) To define the style of the text decoration line (e.g., solid, dashed, etc.)

5-Which of the following is the correct way to apply an underline text decoration to a paragraph with the class name “underline” in CSS?

a) p.text-decoration: underline;

b) .underline { text-decoration: underline; }

c) p { text-decoration: underline; }

d) .underline { underline: text-decoration; }

Answer: b) .underline { text-decoration: underline; }

6-Which value of the text-decoration property is used to add both an underline and an overline effect?

a) underline overline

b) line-through

c) none

d) overline

Answer: a) underline overline

7-How can you remove all text decorations from an element?

a) Set the text-decoration-style property to none

b) Set the text-decoration property to none

c) Set the text-decoration property to overline

d) Set the text-decoration-line property to none

Answer: b) Set the text-decoration property to none

8-Which CSS property controls the thickness of the text decoration line?

a) text-decoration-thickness

b) text-decoration-width

c) text-decoration-style

d) There is no property to control the thickness of the text decoration line

Answer: d) There is no property to control the thickness of the text decoration line

9-How can you apply a line-through effect to a text with the class name “strike” in CSS?

a) .strike { text-decoration-style: line-through; }

b) .strike { text-decoration-line: line-through; }

c) .strike { text-decoration: line-through; }

d) .strike { line-through: text-decoration; }

Answer: c) .strike { text-decoration: line-through; }

10-Can you combine multiple text decoration values using the text-decoration property?

a) Yes, it is possible to combine multiple values.

b) No, only one text decoration value can be applied at a time.

Answer: a) Yes, it is possible to combine multiple values.

11-Which value of the text-decoration property is used to add a horizontal line above the text?

a) underline

b) overline

c) line-through

d) none

Answer: b) overline

12-How can you specify a different color for the text decoration line of a specific element?

a) Using the color property

b) Using the text-color property

c) Using the text-decoration-color property

d) It is not possible to change the color of the text decoration line

Answer: c) Using the text-decoration-color property

13-Can you apply text decoration to inline elements like or <a>?

a) Yes, text decoration can be applied to inline elements.

b) No, text decoration is only applicable to block-level elements.

Answer: a) Yes, text decoration can be applied to inline elements.

14-Which CSS property is used to control the style of the text decoration line?

a) text-decoration-style

b) text-decoration-line

c) text-decoration-width

d) text-decoration-color

Answer: a) text-decoration-style

15-Is it possible to customize the thickness of the text decoration line using standard CSS properties?

a) Yes, you can use the text-decoration-thickness property.

b) No, the thickness of the text decoration line is browser-dependent and not directly adjustable.

Answer: b) No, the thickness of the text decoration line is browser-dependent and not directly adjustable.

16-What is the default value of the text-decoration property?

a) none

b) underline

c) line-through

d) overline

Answer: a) none

17-How can you remove text decoration from all links on a web page?

a) Use the selector a { text-decoration: none; }

b) Use the selector .links { text-decoration: none; }

c) Use the selector a:visited { text-decoration: none; }

d) Use the selector a:hover { text-decoration: none; }

Answer: a) Use the selector a { text-decoration: none; }

18-What is the purpose of the text-decoration-skip property?

a) To control the spacing between text decoration lines

b) To specify which elements the text decoration should skip over

c) To determine the speed of a text decoration animation

d) The text-decoration-skip property does not exist

Answer: b) To specify which elements the text decoration should skip over

19-Can you apply text decoration to specific parts of a text within an element?

a) No, text decoration is applied to the entire element’s text content only.

b) Yes, by wrapping the desired parts of the text with inline elements and applying text decoration to those elements.

Answer: b) Yes, by wrapping the desired parts of the text with inline elements and applying text decoration to those elements.

20-Which CSS property can be used to control the distance between the text and the text decoration line?

a) text-decoration-spacing

b) text-decoration-line-spacing

c) text-decoration-offset

d) text-decoration-margin

Answer: c) text-decoration-offset

References

Here are some references that you can use to explore more about the topic of text decoration in HTML and CSS:

MDN Web Docs – text-decoration:

CSS Tricks – Text Decoration:

W3Schools – CSS Text Decoration:

جافا سكريبت

Curriculum

CSS Text Decoration :A Guide to Decorate the text

CSS Text Decoration

CSS Text Decoration values

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: underline overline;

text-decoration: underline line-through;

How to use text decoration to an HTML element using CSS?

How to use text-decoration: none ?

How to use text-decoration: underline?

How to use text-decoration: overline?

How to use text-decoration: line-through?

Explanation:

How to use text-decoration: underline overline ?

How to use text-decoration : underline line-through?

How to use text-decoration-color ?

How to use text-decoration-style ?

Explanation:

How to add under line decoration and color to a text ?

Application by this lesson

Quiz with answers

References

Leave a Reply

Modal title