When you’re designing text for a web page, you may want to add decoration to the text. For instance, you may want to add an underline to important work, or a line through old text.
That’s where the CSS text-decoration property comes in. The text-decoration property allows you to add underlines, overlines, and lines that appear through a block of text.
This tutorial will discuss, with examples, how to use the text-decoration property, and its three sub-properties, to add decoration to a block of text in CSS. By the end of reading this tutorial, you’ll be an expert at decorating text using the text-decoration property.
CSS Text Decoration
Decorating text by adding underlines, lines that appear through the text, and overlines, is an important way in which you can draw attention to key content on a web page.
When text is underlined, it indicates to the user that what has been underlined is worth reading, for example. In addition, text decoration is an important part of designing an accessible experience on a web page.
This is because relying on visual indicators like colors alone will not be accessible to all users, such as those who are color blind or have a similar visual impairment. Adding an underline, strikethrough, or overline will make it more likely that a user is able to notice that a portion of text has been highlighted.
In CSS, the text-decoration shorthand property allows you to specify the decoration added to the text. This property is shorthand for three other properties, which are:
- text-decoration-line (required)
- text-decoration-color (optional)
- text-decoration-style (optional)
These properties can be combined when using the text-decoration property to make your code more efficient. Instead of specifying each one individually, you can use the following syntax to define a text decoration style:
text-decoration: line color style;
There is no specific order in which styles for the text-decoration property should appear.
Now that we know the basics of the text-decoration shorthand property, let’s walk through an example of how it works. For this tutorial, we are going to use the example of a local bakery who is looking to build their own website.
CSS Text Decoration Example
The local bakery for whom we are developing a site has asked that we highlight the titles on each page.
For example, on the About page, the title About Us should have an underline, to draw the user’s attention to the title. Each title should have a light blue single underline, and each line should be 2px wide. We could create such a title using the following code:
<html>
<h1>About Us</h1>
<style>
h1 {
text-decoration: lightblue solid underline;
}Click the 
button in the code editor above to see the output of our HTML/CSS code.
In our HTML code, we defined a header using the <h1> tag which shows the text About Us on the web page. Then, in our CSS code, we created a rule that applies to all <h1> elements on our web page. This rule uses the text-decoration property to create an underline that:
- Appears in light blue (denoted by
lightblue) - Has a single line (denoted by
solid) - Uses the underline style (denoted by
underline)
This is a simple example of an underline created using the text-decoration property. Now, let’s explore each of the properties that make up the text-decoration property.
Text Decoration Line (text-decoration-line)
The text-decoration-line property allows you to set the type of line that will appear on the text to which the property is applied. The values this property accepts are:
- underline: Creates a line that appears under a block of text.
- overline: Creates a line that appears above a block of text.
- line-through: Creates a strike-through line that appears through the middle of a block of text.
- blink: Makes the text to which the style is applied blink (this style is deprecated).
If this property is used without any other text decoration, a solid, single black underline will appear.
Let’s return to the bakery example to illustrate how this property works. Suppose the bakery, which is called Jefferson’s Family Bakery, has asked us to style the text on their About Us page. They have asked us to underline certain parts of their text.
We could use the text-decoration-line property to accomplish this task. Here is the code we would use:
<html>
<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.
Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>
<style>
.underline {
text-decoration-line: underline;
}Click the button in the code editor above to see the output of our HTML/CSS code.
Let’s break down our code. In our HTML code, we have created a paragraph of text enclosed within <p> tags.
Inside this paragraph is a description of the Jefferson’s Family Bakery. In addition, two terms —most well-known for our bagels and come to Jeffersons—are enclosed within <span> tags, which are used to separate the text enclosed within from the rest of the paragraph.
In our CSS code, we define a rule that applies to all elements with the class underline. So, in our case, all our <span> tags use the style we have defined, because each <span> tag is also assigned to the class underline. The rule we defined uses text-decoration-line to add a single black underline to the text we wanted to highlight.
Text Decoration Color (text-decoration-color)
The text-decoration-color property allows you to define the color of the text decoration applied to a style. Suppose we wanted to make the underlines we defined in our last example appear in the color green. We could make this happen using the following style:
<html>
<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.
Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>
<style>
.underline {
text-decoration-line: underline;
text-decoration-color: green;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our CSS code, we have added a text-decoration-color style rule which has the value green. This sets the color of the underline we have defined using text-decoration-line to green.
We also specified a value for text-decoration-line, which is required in order to create our line style.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Text Decoration Style (text-decoration-style)
The text-decoration-style property allows you to set the style in which text decoration will appear in a block of text. The text-decoration-style property accepts any one of the following values:
- solid: Creates a single line.
- double: Creates a double line.
- dashed: Creates a dashed line.
- dotted: Creates a dotted line.
- wavy: Creates a wavy line.
Let’s return to the bakery example. Suppose the bakery has asked us to add a dotted underline to the heading About the Jeffersons on the About Us page. This underline should appear in light blue and should use the dotted style. We could create this underline using the following code:
<html>
<h2>About the Jeffersons</h2>
<style>
h2 {
text-decoration-line: underline;
text-decoration-color: lightblue;
text-decoration-style: dotted;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our code, we used the text-decoration-line and text-decoration-color styles to define our underline and set the color of the underline to light blue, respectively. Then, we used the text-decoration-style property to set the style of our underline to dotted.
Removing Underlines from a Hyperlink
The text-decoration property is commonly used to remove the underlines that appear in a traditional HTML link. This is because the text-decoration property accepts the value none, which is used to remove the default text styles applied to an element.
By default, when you define a link using the <a> tag, an underline will appear. However, not all websites want to show underlines below their links.
Suppose the Jefferson’s Family Bakery website has a hyperlink with the label Contact Us, which links to the page /contact.html on their site. Here is the HTML code for the hyperlink:
<a href="/contact.html">Contact Us</a>
When we render this component, the following response is returned: Click the button in the code editor above to see the output of our HTML/CSS code.
As you can see, the link appears in blue and with an underline. If we wanted to remove this underline, we could use the following code:
<html>
<a href="/contact.html">Contact Us</a>
<style>
a {
text-decoration: none;
}Click the button in the code editor above to see the output of our HTML/CSS code.
As you can see, in our second example the underlines below our link have been removed. In our CSS code, we used the text-decoration: none rule and applied it to every <a> tag. This removes any text decoration from the elements to which it is applied, which in this case is every <a> tag.
Conclusion
Text decoration is one way in which you can draw attention to specific text on a web page, and make text appear in a more aesthetically pleasing way.
The CSS text-decoration property, and its associated properties, allow you to define the decoration used by a block of text on a web page.
This tutorial discussed, with reference to examples, how to use the text-decoration property and its associated properties to decorate text on a web page. Now you’re equipped with the knowledge you need to start decorating text like a professional web designer!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
