Updated June 22, 2023
Overview of Text Decoration CSS
CSS is all about presentation. If the first view of the page appeals to the user, half of the work is already done. Presenting your text content such that all the important parts grab the immediate attention of the end-users is very important. Cascading Style Sheet or CSS offers many options for improving the presentation of text content on a web page. It provides various ways to structure our text and many options to highlight the important text. One such property is text-decoration. One can use this property and customize how the text should be lined, i.e., underlined, overlined, or crossed (strike-through). It is a property that offers a lot of parameters that can be used to decorate the text as desired. However, it is to be noted that this feature or property is not supported by all browsers alike and might not give similar results. Hence, checking the browser compatibility before running the final code will be helpful. Let us see the syntax and how text-decoration works in CSS.
How does Text Decoration in CSS work?
Text-decoration in CSS can be used as inline CSS, External CSS, or Internal CSS, depending upon the developer’s choice.
Syntax:
The syntax for text decoration is as follows:
text-decoration: line | color | style;Here, line defines the type of line needed for the text, whether it should be an underline, an overline, or a strikethrough. Color defines the color of decoration. Style determines how the line will be, i.e., if it will be dotted or wavy.
The property text-decoration is a shorthand property for three-parent properties, which are:
- text-decoration-line
- text-decoration-style
- text-decoration-color
Defining these three properties separately for different elements can be a lengthy task. Hence the property text-decoration, short-handed, covers all three.
Examples of Text Decoration in CSS
Let us have a look at some of the examples for text decoration:
1. Text decoration using all three parent properties
We will use the External CSS method for this example, so we will start by creating a css file.
We will define the three properties, i.e., text-decoration-line, text-decoration-style, and text-decoration-color, for the heading element <h2>. The code should be like this:
Code:
h2{
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}For this example, we will define a class called ‘overline’. The code should be like this:
Code:
.overline{
text-decoration-line: overline;
text-decoration-style: dashed;
text-decoration-color: darkgreen;
}Combining these two, the final CSS coding should look like as below:
Code:
h2{
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.overline{
text-decoration-line: overline;
text-decoration-style: dashed;
text-decoration-color: darkgreen;
}Now that the CSS file is complete, we will create a corresponding HTML file and call it the external style sheet. We will muse<h2> element that we wrote the styling for and use the class for paragraph element <p>. The HTML file resulting in the web page should look similar to this:
Code:
<html>
<head>
<title>Text-decoration property</title>
<link rel = "stylesheet" href = "decoration.css">
</head>
<body>
<h2>Text-decoration through External CSS</h2>
<p class="overline">Testing text-decoration property</p>
</body>
</html>Final Output:
2. Text-decoration using the shorthand property
We will use the shorthand property in this example to demonstrate text decoration.
Start by creating and defining the style since we are also using external CSS for this example. We will first define the text-decoration styling for the heading element <h2> like this:
Code:
h2{
text-decoration: underline wavy turquoise;
}Next, we will define a general class that can be used by any element if and when required. The coding for the CSS class should be similar to this:
Code:
.overline{
font-size: 20px;
text-decoration: overline underline dashed red;
}The CSS code finally should look like as given below. Please note that more features and parameters can be added as required.
Code:
h2{
text-decoration: underline wavy turquoise;
}
.overline{
font-size: 20px;
text-decoration: overline underline dashed red;
}Next, we will write the HTML code using the heading element and the ‘overline’ class, which we styled for in the external style sheet. Since it is an outer sheet, we will call for it in the head section of the page. The final combined HTML page coding should be similar to this:
Code:
<html>
<head>
<title>Text-decoration property</title>
<link rel = "stylesheet" href = "decoration.css">
</head>
<body>
<h2>This is demonstration of text-decoration shorthand Property</h2>
<p class="overline">Testing text-decoration property</p>
</body>
</html>Save this code and open the HTML file through a browser.
Output:
3. Different types of text decoration using inline CSS
We will create an HTML page for this example, as we use inline style CSS for trying out different parameters of text decoration.
Firstly, we will set the styling for <h1> element. We will define text decoration and set the parameters such that any content within <h1> should be doubly underlined in blue. We will similarly style the elements <h2> and <h3>.
The code should be like as below:
Code:
<h1 style="text-decoration: underline double blue ;">Text-Decoration</h1>
<h2 style="text-decoration: underline wavy olive;">Using Wavy underline for this paragraph</h2>
<h3 style="text-decoration: line-through red;">Using strike through for crossing out text</h3>Combining this styling code with the basic HTML page structure, the final code should look something like this:
Code:
<html>
<head>
<title>Text-decoration using inline css</title>
</head>
<body>
<h1 style="text-decoration: underline double blue ;">Text-Decoration</h1>
<h2 style="text-decoration: underline wavy olive;">Using Wavy underline for this paragraph</h2>
<h3 style="text-decoration: line-through red;">Using strike through for crossing out text</h3>
</body>
</html>Save this page and open it through a browser.
Final Output:
The examples demonstrated how text decoration works. However, this property is not supported by all browsers, so keep in mind to check the browser support before running your final code. Text decoration helps when highlighting text through text-shadow, or outline is not enough. This feature allows little changes that hikes the quality of the interface for the user. After all, the first impression of the page is about how it is presented to the user.
Recommended Articles
We hope that this EDUCBA information on “Text Decoration CSS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
