XQA
Back to Web Development
2026-03-235 min read

Text Decoration (Web Development)

Learn Text Decoration (Web Development) step by step with clear examples and exercises.

Why This Matters

Text decoration is an essential aspect of web development that allows you to style text on your web pages, making them more visually appealing and user-friendly. In this tutorial, we'll delve into the world of text decoration, discussing why it matters, prerequisites, core concepts, worked examples, common mistakes, practice questions, and frequently asked questions.

The Importance of Text Decoration

  1. Highlight important elements on your page, such as links or headings, making them easier to find for users.
  2. Enhance the overall aesthetic of your website by applying various styles like underlines, lines through text, and overlines.
  3. Improve accessibility by using appropriate decoration techniques that make your content more readable for people with visual impairments.
  4. Prevent common mistakes like forgetting to close HTML tags or using incorrect syntax, which can lead to unexpected results on your web pages.
  5. Create custom underlines and other text decorations that set your website apart from others.

Prerequisites

Before diving into text decoration, you should have a basic understanding of:

  1. HTML (HyperText Markup Language): The standard markup language for creating web pages.
  2. CSS (Cascading Style Sheets): A style sheet language used for describing the presentation of a document written in HTML.
  3. Basic understanding of web browsers and how they interpret HTML and CSS code.
  4. Familiarity with using text elements like `, , and ` in HTML.
  5. Knowledge of basic CSS properties, selectors, and syntax.

Core Concept

Text decoration can be applied to any text element on your web page using HTML and CSS. The most common text decoration properties are text-decoration, text-underline, text-line-through, and text-overline.

HTML Basics

To apply text decoration in HTML, you can use the `` element with the appropriate class or inline style. For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Decoration Example</title>
</head>
<body>
<h1>Decorated Text Example</h1>
<p><span class="decorate-underline">Underlined text</span></p>
<p><span class="decorate-line-through">Line through text</span></p>
<p><span class="decorate-overline">Overlined text</span></p>
<a href="#" class="no-underline">Link with no underline</a>
</body>
</html>

CSS Basics

In the example above, we used classes like decorate-underline, decorate-line-through, and decorate-overline. To define these styles in your CSS file (or inline style), you can use the text-decoration property:

body {
font-family: Arial, sans-serif;
}

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

.decorate-line-through {
text-decoration: line-through;
}

.decorate-overline {
text-decoration: overline;
}

a.no-underline {
text-decoration: none;
}

Custom Underlines and Other Decorations

You can create custom underlines by combining the text-decoration, border-bottom, and pseudo-elements like ::before or ::after. For example:

.custom-underline {
position: relative;
}

.custom-underline::after {
content: "";
display: block;
width: 100%;
height: 2px;
border-radius: 3px;
background-color: #333;
position: absolute;
left: 0;
bottom: -5px;
}

Worked Example

Let's create a simple web page with decorated text using the HTML and CSS provided above:

  1. Create an index.html file and paste the HTML code from the example.
  2. Create a styles.css file and paste the CSS code from the example.
  3. Save both files in the same directory.
  4. Open your web browser and navigate to the index.html file. You should see decorated text on your web page.

Common Mistakes

  1. Forgetting to close HTML tags: Always remember to close your HTML tags, such as ` or , properly with a closing tag (e.g., `

or ).

  1. Incorrect syntax for CSS properties: Ensure that you're using the correct syntax when defining CSS properties, including proper camelCase naming conventions and semicolons at the end of each property declaration. For example:
/* Incorrect */
.decorate-underline { text-decoration: underline }

/* Correct */
.decorate-underline {
text-decoration: underline;
}
  1. Overuse of text decoration: While text decoration can make your web pages more visually appealing, it's essential to use it judiciously and not overdo it. Too much text decoration can make your content difficult to read and distracting for users.
  2. Using outdated or deprecated properties: Some text decoration properties like text-decoration-color are considered outdated and may not be supported by all browsers. It's essential to use modern, well-supported properties when styling your web pages.
  3. Forgetting to define styles for links: If you want to remove the default underline from links, make sure to define text-decoration: none for both link elements (``) and specific classes of links.

Practice Questions

  1. How would you create a link with an underline using HTML and CSS?
  2. What is the correct syntax for defining multiple CSS properties on the same line?
  3. Why is it important to use text decoration judiciously in web design?
  4. How can you create custom underlines using CSS?
  5. What are some outdated or deprecated text decoration properties that should be avoided?

FAQ

Q: Can I apply different text decorations to the same element using CSS?

A: Yes, you can apply multiple text decorations to the same HTML element by separating them with a space within the text-decoration property. For example:

.decorate-both {
text-decoration: underline line-through;
}

Q: How can I remove the default underline from links in my web page?

A: To remove the default underline from links, you can set the text-decoration property to none for link elements (``) or specific classes of links. For example:

a {
text-decoration: none;
}

.no-underline a {
text-decoration: none;
}

Q: Is it possible to create custom underlines using CSS?

A: Yes, you can create custom underlines by combining the text-decoration, border-bottom, and pseudo-elements like ::before or ::after. For example:

.custom-underline {
position: relative;
}

.custom-underline::after {
content: "";
display: block;
width: 100%;
height: 2px;
border-radius: 3px;
background-color: #333;
position: absolute;
left: 0;
bottom: -5px;
}

Q: What are some outdated or deprecated text decoration properties that should be avoided?

A: Some text decoration properties like text-decoration-color, text-underline-position, and text-underline-style are considered outdated and may not be supported by all browsers. It's essential to use modern, well-supported properties when styling your web pages. Instead of using these deprecated properties, consider using the more flexible text-decoration property with multiple values.

Q: How can I make text decorations accessible for users with visual impairments?

A: To make text decorations accessible, ensure that they do not interfere with the readability of your content and that they are used judiciously. Additionally, consider using high contrast colors for underlines, lines through text, and overlines to improve visibility for users with color blindness or low vision. You can also use ARIA attributes like aria-current to provide additional context for screen readers.

Text Decoration (Web Development) | Web Development | XQA Learn