OneBite.Dev - Coding blog in a bite size

underline text css

Code snippet for how to underline text css with sample and detail explanation

Underlining text is a commonly used style in web design. It is often used to highlight certain text, indicating that it is a hyperlink or simply for aesthetic purposes. In this tutorial, we’ll discuss how to underline text in CSS, breaking down the code and explaining each element for your understanding.

Code snippet: Underlining text in CSS

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-decoration: underline;
}
</style>
</head>
<body>

<p>This is an underlined paragraph.</p>

</body>
</html>

Code Explanation: Underlining text in CSS

To start with, our code is written in HTML, which is a standard language for creating webpages. CSS, or Cascading Style Sheets, is used alongside HTML to style the appearance of the pages.

The <style> tag in the <head> section is where we put our CSS code, and it applies styles to HTML elements. In our case, we’re applying styles to <p> or paragraph elements.

<style>
p {
  text-decoration: underline;
}
</style>

In the above code snippet, the ‘p’ stands for all paragraphs in the HTML document. By enclosing text-decoration: underline; within curly brackets {}, we’re giving a specific instruction that all paragraphs should be styled in a particular way - underlined in this case.

text-decoration is a CSS property that’s used to set the text formatting of an HTML element. Here, it’s set to underline, which adds a line beneath the text.

<body>

<p>This is an underlined paragraph.</p>

</body>

Finally, we get to the body of the HTML document. Here, the <p> tag is used for the paragraph that we want to underline. Thanks to our CSS style, the text within the <p> tag will be underlined.

And there you have it - a simple, direct way to underline text with CSS. Remember to replace ‘p’ with whatever element you want to underline, and your webpage will shine with well-formatted, underlined texts.

css