Pin Me

How To Use CSS Underline

written by: Nicholas•edited by: Simon Hill•updated: 1/21/2010

Although it always brings one main result, a line underneath some text, the CSS Underline characteristic can be used in a variety of different ways and for a variety of different purposes. Read more to learn all about CSS underlining.

  • slide 1 of 5

    CSS Underline

    CSS underline is about as basic as it gets when it comes to web design and development. If you are completely new to web design, development, HTML, CSS, etc, this is what CSS underline does. Simple, right? The thing with CSS is, there are several different ways that you can implement it. You can use same page HTML and CSS, you can use a distinct stylesheet, you can use PHP, and so much more. This tutorial will teach you the basics of using the CSS underline style, and give some examples of how it can be used. Whether you are doing anything from underlining some text on your MySpace, to using external style sheets with your WordPress blog, this article should help you out.

  • slide 2 of 5

    Quick basics

    Chances are, if you are reading this, you are probably quite new to working with CSS. So, some basics to get you started. CSS stands for cascading style sheet. CSS is a completely different thing than HTML. CSS is style only.

    These { } are brackets. You will use them quite often when working with CSS.

  • slide 3 of 5

    Creating a direct CSS underline

    myspace 

    In many cases, you can add direct CSS styling to text. This method of using CSS should be used for quick, basic, CSS underline styling. It cannot be done to just any text located just anywhere. The text must be HTML enabled. This is a good CSS underline method for quickly editing MySpace text sections.

    To create direct CSS, we only need to use two tags, an opening tag and a closing tag. For CSS underline, the opening tag is: <u>. The closing tag is </u>. The <u> tag initiates (starts) the underline point, and the </u> tag stops the underline. For example:

    <u>This is a Bright Hub CSS Underline Tutorial</u> will give you this: This is a Bright Hub CSS Tutorial

    Only text within the tag elements will be underlined. For example:

    I see a <u> red door </u> and I want to paint it black will give you this: I see a red door and I want to paint it black

    Easy enough, right? That's all there is to it. That's how you do a direct CSS underline.

  • slide 4 of 5

    CSS Underline via External Stylesheet

    wordpress 

    In some circumstances, you will not want to use direct CSS underlining. One common example of this is a WordPress blog. With WordPress, you have a distinct stylesheet, which you call to action to be used throughout the theme. It would be stupid to use <u> </u> every time you needed to underline an element. For example, if you want all of your post titles underlined, you don't want to have to add <u> </u> manually every time your write a post. This is where external style sheets come in handy. External style sheets allow you to specify certain html and add CSS style to it; in this case, the underline trait. Here's how it works:

    This is your WordPress post structure:

    HTML:

    <div id="titleofposts">

    This is where my post titles go, I want all of this text to be underlined

    </div>

    CSS:

    #titleofposts {

    text-decoration:underline;

    }

    This is the result:

    This is where my post titles go, I want all of this text to be underlined

  • slide 5 of 5

    Conclusion

    That's all there is to it. CSS Underlining is very easy once you get the hang of it. If you want to learn more about CSS underline, I suggest you check out this website, as it features some great tutorials and has an editor where you can practice creating your own CSS.