Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 18 3 Ways To Use Text Decoration (Underline, Overline, line-through)

This is Sasha and thanks for joining me here for another CSS training tutorial where I share with you how to edit or modify the CSS code on your business website or if you’re looking to just gain some CSS skill. In this training tutorial, what we’ll do is look at the text-decoration property. Let’s take a quick look.

Three ways of decorating text

When it comes to text-decoration there’s really three main ways to take a look at the text-decoration. Here’s the element that we have. It’s the text-decoration element and the attribute that I’ve assigned to it is the underline, okay? This now specifies that any H2 tags are underlined.

There’s also one other one that you have and that is overline and if go ahead and save and make that change you can see that now there’s overline to that.

The other thing that you could do is also a line through and there you go. You can see it’s kind of like a strike out version. Those are the three ways and the final way is none.

But none is usually referred to things like, let’s just say, anchor tag. If I went ahead and I did an anchor tag over here, and then we’ll type in mywebsite and we’ll close that up and we’ll finish this up.

Normally, what happens is when you have an anchor link, you have something that’s underlined. But what I could do is do a class and let’s just call it mainlink. I’ll go ahead and do that. I’ll change this class to mainlink. And now when you refresh, you can see that page is or that link is now not underlined or there’s no text decoration in there.

Because when it comes to CSS and HMTL, they all kind of have their own inherit properties. They inherit certain things already from the backbone of just the basic website structure from your browser. But this is how we make adjustments to the code and to our CSS is through going it through this way and knowing and understanding what’s happening. And in this case right there, we went ahead and chose none so that way we have no text decoration right there.

Those are the three ones that you have. You basically have the none, you have the underline right there that you could do, you also have the overline right there at the top where it gives a line and those are the main ones that you have as far as text decoration goes.