Underline a link only in one spot

My .css file has the following:

a {
	text-decoration:none;
	color:#b51412;
}

I would like to keep it like that so that there is no underlined links on the various parts of the webpage, however, there is just one spot where I would like underlined links. Is there anyway to take the text-decoration:none command away from links in this one area? I’d be happy to do it for each href tag manually since there are only a few of them and I don’t know CSS’s too well. I am changing a small website that I had a web designer build and I am learning what to do by reverse engineering.

Hi,

If you apply a class to the anchor tag:

<a href="..." class="underline">Link Text</a>

Then in your css do this:

a.underline{ text-decoration: underline;}

This will do what you want.

I would however, think twice before removing the underline from links, as this is a convention that people have got very used to and you might end up confusing your users.

Worked perfectly, thanks!

The webdesigner setup various methods of making links look like links and I think it works pretty well. However, in this one spot I would like the classic underline.

I’m curious about something, why are the brackets in the CSS put on different lines by my designer instead of it all just being on one line like you did in your code? I know that I’ve seen that elsewhere too.

It makes no difference. You can format the code how you want (within reason) :slight_smile:

I usually put one line rules on the same line so that the stylesheet doesn’t spread out too much but for more than one line I use this format:


.test{
 color:#fff;
 background:#000;
}

Of course you could just do this also:


.test{color:#fff;background:#000}

The trailing semi colon is optional on the last element. It just means that there is more to follow but its good practice to add it when using multiple rules.