Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is CSS text-decoration?
2.1.
CSS Text Decoration Syntax
3.
Text Decoration Line
3.1.
Example
4.
Text Decoration Style
4.1.
Example
5.
Text Decoration Color
5.1.
Example
6.
Importance of text decoration in web design and typography
6.1.
Core Concepts of CSS Text Decoration
7.
Getting Started with CSS Text Decoration
7.1.
CSS Code
8.
Working with CSS Text Decoration
8.1.
Code examples demonstrating advanced text decoration techniques
9.
Comparisons
9.1.
CSS Text Decoration vs Text Transform:
9.2.
CSS Text Decoration vs Letter Spacing and Word Spacing:
10.
Real-world Applications of CSS Text Decoration
10.1.
Indicating Errors or Strikethroughs:
10.2.
Creating Customized Buttons
11.
Frequently Asked Questions
11.1.
What is CSS text decoration?
11.2.
How can text be styled using CSS?
11.3.
What does text-decoration blink do in CSS?
11.4.
How do I change the color of text decorations?
12.
Conclusion
Last Updated: Mar 27, 2024
Easy

CSS Text Decoration

Author Pallavi singh
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

CSS Text Decoration is a styling feature that allows you to embellish text with lines and other effects. The text-decoration property is the cornerstone of this feature, providing a means to add underlines, overlines, and strike-throughs to text, enhancing the design and readability.

CSS Text Decoration

In this blog, we will learn about CSS text decoration. We will start with the basics and will later learn more about it through examples for better understanding. 

What is CSS text-decoration?

text-decoration is a CSS property that allows you to control the decoration of text elements, adding or removing visual enhancements like underline, overline, line-through, and blink.

CSS Text Decoration Syntax

The syntax for the text-decoration property is as follows:

selector {
 text-decoration: value;
}

 

This property provides various values like none, underline, overline, line-through, and blink to control the appearance of text.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Text Decoration Line

text-decoration-line is a CSS property that specifies the type of line to be used for the text decoration. It allows you to set values like underline, overline, line-through, and none.

Example

Let us try to decorate the line:

text-decoration-line: underline;

 

This example adds an underline to the text.

Text Decoration Style

text-decoration-style is a CSS property that sets the style of the line used for text decoration. It allows you to define whether the line should be solid, double, dotted, dashed, or wavy.

Example

text-decoration-style: dashed;

 

This example sets the text decoration line to a dashed style.

Text Decoration Color

text-decoration-color is a CSS property that sets the color of the text decoration line.

Example

text-decoration-color: red; 

 

This example sets the color of the text decoration line to red.

Importance of text decoration in web design and typography

Text decoration is pivotal in web design and typography as it helps emphasize text, signify hyperlinks, denote deleted text, and improve aesthetic appeal. It's a simple yet powerful tool to guide user attention and convey meaning.

Core Concepts of CSS Text Decoration

Description of the text-decoration property

The text-decoration property is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, encapsulating the essence of text decoration in CSS.

Core Concepts of CSS Text Decoration

/* Example Code */

.text {
    text-decoration: underline overline line-through;
}

Explanation of values

  • none: No decoration.
     
  • underline: Adds a line below the text.
     
  • overline: Adds a line above the text.
     
  • line-through: Adds a line through the text.
     
  • blink: A discouraged value to make text blink (not supported in many browsers).

/* Example Code */

  • .no-decoration { text-decoration: none; }
     
  • .underlined { text-decoration: underline; }
     
  • .overlined { text-decoration: overline; }
     
  • .struck-through { text-decoration: line-through; }

Introducing text-decoration-color, text-decoration-style, and text-decoration-thickness properties

  • text-decoration-color: Sets the color of the text decoration.
     
  • text-decoration-style: Sets the style of the text decoration (solid, double, dotted, dashed, wavy).
     
  • text-decoration-thickness: Sets the thickness of the text decoration.

/* Example Code */

.custom-decoration {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
}

Usage of text-decoration-skip, text-decoration-skip-ink, text-underline-position properties

  • text-decoration-skip: Specifies what parts of the element's content any text decoration affecting the element must skip over (e.g., none, spaces, objects).
     
  • text-decoration-skip-ink: Specifies whether text decoration should skip ink, going around descenders.
     
  • text-underline-position: Specifies the position of the underline which is set using the text-decoration property (e.g., under, left, right).

/* Example Code */

.skipped-decoration {
    text-decoration: underline;
    text-decoration-skip: spaces;
    text-decoration-skip-ink: auto;
    text-underline-position: under;
}

Getting Started with CSS Text Decoration

Basic setup and requirements

To get started with CSS Text Decoration, all you need is a basic HTML file and a stylesheet. The text-decoration property can be applied to any textual HTML element.

Code snippets illustrating basic text decoration

  • CSS Code

CSS Code

<!-- HTML -->
<p class="decorated-text">Hello, World!</p>


<!-- CSS -->
<style>
.decorated-text {
   text-decoration: underline;
}
</style>

Output

Output

/* Example Code */

.simple-underline {
    text-decoration: underline;
}
.simple-overline {
    text-decoration: overline;
}
.simple-line-through {
    text-decoration: line-through;
}

The above examples illustrate how the text-decoration property and its associated properties can be utilized to style text in various ways, demonstrating the flexibility and functionality of CSS Text Decoration.

Working with CSS Text Decoration

Implementing text decoration in various scenarios

Text decoration finds its application in a plethora of scenarios ranging from emphasizing text, representing hyperlinks, to indicating deletions or additions in text. Here are some implementations:

Emphasizing Text:

/* Example Code */

.emphasized {
    text-decoration: underline;
}


<p class="emphasized">Important text</p>

Representing Hyperlinks:

/* Example Code */

a {
    text-decoration: none; /* Removing the default underline */
}
a:hover {
    text-decoration: underline; /* Adding underline on hover */
}

Indicating Deletions:

/* Example Code */

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

<p class="deleted">This text is deleted.</p>

Code examples demonstrating advanced text decoration techniques

Advanced text decoration techniques can be achieved by combining the text-decoration sub-properties. Let's explore a few:

Custom Underlines:

/* Example Code */

.custom-underline {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
}


<p class="custom-underline">Wavy red underline</p>

Skipping Over Inks and Objects

/* Example Code */

.skip-ink {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}
.skip-object {
    text-decoration: underline;
    text-decoration-skip: objects;
}


<p class="skip-ink">Skip over descenders</p>
<p class="skip-object"><img src="icon.png" alt=""> Skip over objects</p>

Underline Positioning:

/* Example Code */

.underline-left {
    text-decoration: underline;
    text-underline-position: left;
}


<p class="underline-left">Underline on the left</p>

Through these examples, we've traversed from basic to advanced implementations of text decoration. The text-decoration property, along with its sub-properties, opens up a realm of possibilities in styling text, making it an indispensable tool in a developer's toolkit. The flexibility it offers in accentuating text, representing link states, and marking text alterations, makes it a core part of CSS typography and design.

Comparisons

The realm of CSS is vast and provides multiple avenues for text formatting. While text-decoration is focused on adding decorative lines to text, there are other CSS properties dedicated to text formatting and styling. 

Let’s draw a comparison between CSS Text Decoration and other text formatting techniques in CSS.

CSS Text Decoration vs Font Styling:

/* CSS Text Decoration */

.underline {
    text-decoration: underline;
}

/* Font Styling */

.bold {
    font-weight: bold;
}

text-decoration is primarily used for adding underline, overline, and line-through styles to text. On the other hand, properties like font-weight, font-style, and font-variant control the weight, style, and variant of the font, respectively.

CSS Text Decoration vs Text Transform:

/* CSS Text Decoration */

.overline {
    text-decoration: overline;
}

/* Text Transform */

.uppercase {
    text-transform: uppercase;
}

text-transform is used to control the capitalization of text. Unlike text-decoration, it doesn’t add any decorative lines but transforms the text case.

CSS Text Decoration vs Letter Spacing and Word Spacing:

/* CSS Text Decoration */

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

/* Letter Spacing and Word Spacing */

.spaced {
    letter-spacing: 2px;
    word-spacing: 4px;
}

letter-spacing and word-spacing are used to control the space between characters and words, respectively, providing a different aspect of text formatting compared to text-decoration.

Real-world Applications of CSS Text Decoration

Text decoration is not merely a stylistic choice but a functional one that finds its essence across various real-world applications.

Real-world Applications of CSS Text Decoration

Emphasizing Important Text:

/* Code */

.important {
    text-decoration: underline double;
}

<p class="important">This is crucial information.</p>

Underlining text can draw the user's attention to important information on a webpage.

Representing Hyperlinks:

/* Code */

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Text decoration is traditionally used to represent hyperlinks, where an underline represents a clickable link.

Indicating Errors or Strikethroughs:

/* Code */

.error {
    text-decoration: line-through red;
}

<p class="error">Incorrect information</p>

A line-through can signify errors or strikethrough text in a document.

Creating Customized Buttons

/* Code */

.button {
    text-decoration: overline;
}

<button class="button">Click me</button>

Adding an overline or underline can contribute to a unique button design, enhancing the user interface.

Frequently Asked Questions

What is CSS text decoration?

CSS text decoration refers to the visual styling applied to the text content on a web page, enhancing its appearance and conveying additional information.

How can text be styled using CSS?

Text can be styled using CSS properties such as text-decoration, color, font-size, and font-family to control various aspects of its presentation.

What does text-decoration blink do in CSS?

The text-decoration: blink; property in CSS creates a blinking effect for the text, causing it to alternately appear and disappear.

How do I change the color of text decorations?

To change the color of text decorations, use the color property alongside text-decoration. For example, text-decoration: underline; color: red; applies a red color to underlined text.

Conclusion

We've traversed the landscape of CSS Text Decoration, diving into its core concepts, practical applications, and common issues. This journey illuminated how this feature, though seemingly simple, holds a significant place in web typography and design. With the knowledge acquired, you're now well-equipped to employ CSS Text Decoration in your projects, enhancing the user experience through appealing and accessible text styling. The horizon of text decoration is broad with potential future enhancements promising even more control and creativity. So, go ahead, explore, and experiment with the myriad possibilities CSS Text Decoration unfolds. Your web pages are bound to look more polished and engaging!

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Happy Learning!

Previous article
CSS3 Features
Next article
CSS Cascade and Specificity
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass