CSS

How To Set Text Decoration

Often it is quite clear what a CSS property is for, it is just a case of learning what values you can set it to. For instance, the margin property sets the margin around an element. Font-size sets the size of the font. In both cases, what the property does is quite clear.

But the text-decoration property is a little misleading. It sounds like it should be for something very fancy, like making an element sparkle or glow. When in fact it’s much less interesting than that.

        text-decoration: 
      

The text decoration property does allow you to add some decoration to a HTML element, but that decoration is limited to just a line.

Well that doesn’t sound fancy at all.

That’s what I’ve always thought.

Each value you can set the text-decoration property to defines where the line goes. There are four values to talk about.

Underline

A common and familiar example would be to use the text-decoration property to put a line under, or underline, some text. This helps to signify that a particular word or phrase is important and worthy of more attention.

I feel like everything I say from now on should be underlined.

People need to pay attention to what I have to say.

It's important.

You would say that.

I sleep for like 20 hours a day so I don’t say a lot.

So when I do talk it’s because it’s important.

Aria, yesterday you spent 10 minutes trying to describe wasps.

I didn’t know what those mean, black and yellow boys were called!

While the text-decoration property isn’t exactly clear, the values you can use are. To underline some text, simply use this code.

        text-decoration: underline;
      

Overline

Another example, although less common, is to put a line over the top of some words. This is called an overline. To use this, set the value of your text-decoration property to overline.

        text-decoration: overline;
      

Be careful doing this though. If there is a lot of text on your page it may look like you are underlining a word from the text above which might be confusing for your users.

Line-Through

Another way to use the text-decoration property allows you to put a line through some text. This might be used to show a correction or a change in the text.

It can also be used as a way to draw attention to words which the writer may be hiding but just not from the reader; like inner thoughts that someone doesn’t actually say but the writer wants you to know.

        text-decoration: line-through;
      

You need to come look.

They are buzzing around again.

Those black and yellow boys!

But chubbier for some reason?

Maybe they mean business but they are sort of smooching flowers?

Why are you telling me this?

I’m basically next to you looking at these bees too.

Thank you for telling me.

Comfortable? Not a fan of bees?

None

Why are you telling me about ‘none’?

Surely if I don’t want any text decoration, I just don’t add any to my code.

Aria makes a good point. But there is a special case, where this is used a lot.

You may remember from when we looked at links in HTML, that any text elements which are links are underlined to show your user that there is a link they can click; remember that underlining an element helps draw attention to it.

A lot of people don’t like how this looks with links because in some cases an underlined link doesn’t look very modern, although it does depend on the rest of the website.

So the ‘none’ value for text-decoration allows you to remove it. Look at this link for example code and the element it creates:

        <a href="www.codingforcats.com">
        	<p>Only the best cat themed, web development tuition website about!</p>
        </a>
      

What is odd is that in this case, the text-decoration CSS needs to be applied to the link and not the p tag. A normal paragraph element is not underlined, and so CSS telling your browser not to include any text decoration won’t do anything.

But a link element is normally underlined and so without this extra CSS there will be an underline. As the paragraph element is the only element inside the link it just

looks

like the paragraph is underlined when it is actually the link.

        text-decoration: none;
      
        <a href="www.codingforcats.com" style="text-decoration: none;">
        	<p>Only the best cat themed, web development tuition website about!</p>
        </a>
      

I mean, I think it will be easy to remember that the underline is part of the a tag and not the p tag.

Underlines are important. And you don’t want anything important to have p on.

Right.

Well if that works for you…

Nowhere To Be Seen

If you don’t want any links to be underlined, then instead of a class name or an ID in your CSS, just use the a from the a tag. Just like this:

        a {
        	text-decoration: none;
        }
      

Using the a tag rather than an ID or a class will apply any CSS inside the curly brackets to all the links on your page.

That’s a really useful tip.

Thank you.

Now are you going to feed me?

Dinner time was like 30 seconds ago, hurry up.

I can’t believe he hasn’t fed me yet!

Oh wow would you look at the time.

I didn’t realise it’s time for dinner!