Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!


How to underline text in HTML using CSS

Adding emphasis to text in your HTML documents is a common styling requirement in web development. One way to emphasize text is by underlining it. In this article, we’ll explore how to underline text in HTML using CSS.


Before we start, ensure you have the following:

  1. Text Editor: Any text editor will suffice, but a code editor like Visual Studio Code, Sublime Text, or Atom will provide a more convenient coding experience.
  2. Web Browser: To view your HTML document with the applied CSS styles.

Steps to Underline Text Using CSS:

1. Create an HTML File

Begin by creating an HTML file (with the .html extension) or using an existing one. You can use a basic structure like this:

<!DOCTYPE html>
    <title>Underlining Text</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <p>This is an example of underlined text.</p>

In this example, we’ve created a simple HTML structure with a paragraph containing text.

2. Create a CSS File

Create a CSS file (with the .css extension) in the same directory as your HTML file. In this case, we’ll name it styles.css. This is where you’ll define the styles to underline text.

3. Define CSS for Underlining Text

Open your styles.css file and add the following CSS rule to underline text:

/* styles.css */

/* Select the <p> element and apply the text-decoration property */
p {
    text-decoration: underline;

In this CSS code, we select the <p> element and use the text-decoration property to set the text-decoration style to “underline.”

4. Link CSS to HTML

In your HTML file, you need to link the CSS file by adding the following line inside the <head> section:

<link rel="stylesheet" type="text/css" href="styles.css">

This line tells the browser to load the styles.css file for styling your HTML content.

5. View in a Web Browser

Save your HTML and CSS files, then open your HTML file in a web browser. You will see that the text inside the <p> element is underlined, as defined by the CSS.

That’s it! You have successfully underlined text in HTML using CSS. You can apply the text-decoration: underline; property to any HTML element you want to underline, whether it’s a paragraph, heading, or a specific section of text.

Additional Styling Options

In addition to underlining text, CSS offers various other text decoration properties:

  • text-decoration-line: Specifies the type of line to use, which can be “underline,” “overline,” “line-through,” or “none.”
  • text-decoration-color: Defines the color of the text decoration line.
  • text-decoration-style: Specifies the style of the text decoration line, such as “solid,” “dotted,” or “dashed.”

You can combine these properties to create different text decoration effects according to your design needs. For example:

/* Example of combining text-decoration properties */
p {
    text-decoration-line: underline;
    text-decoration-color: blue;
    text-decoration-style: dashed;

This will underline the text with a blue dashed line. Experiment with these properties to achieve the desired text decoration style for your web page.



About Author

Leave a comment

Your email address will not be published. Required fields are marked *

You may also like


Mastering Text Alignment: How to Justify Text with CSS

Text justification in CSS is a styling technique used to create clean and organized text layouts, enhancing readability and aesthetics.
Angular CSS

How to add CSS class on click in Angular

In Angular applications, dynamically adding CSS classes on user interaction, such as a click event, offers a way to enhance