Best way to underline a single word?

[Lulu]

I've set up a 'Join Us' page on a test site. The sentence 'You can download a joining form here' has a hyperlink attached to the word 'here' so that a Word file can be downloaded.

 

The word 'here' already has a style applied to it so that it changes colour if you hover over it:

 

.here:hover	{ color:#00F;	}

 

However, I also want the word to be permanently underlined, so have done the following within html, but it feels a bit clunky. Is there any other way of achieving the same result without putting it in the html?

 

<p>You can download a joining form <a class="here" style="text-decoration:underline" href="../text/joining.doc">here</a>.</p>

[jstern]

try wrapping it in a span tag?

 

html:

<p>You can download a joining form <span class = "span_underline"><a class="here" href="../text/joining.doc">here</a></span>.</p>

 

css:

 

.span_underline {

text-decoration: underline;

}

 

 

---edit---

or a better solution, dont add span class at all and "text-decoration: underline;" to your .here class in the css file

Edited January 25, 2012 by J Stern

[Wickham]

Why not add a link style:-

.here:link	{ text-decoration:underline;	}
.here:hover	{ color:#00F;	}

HTML

<p>You can download a joining form <a class="here" href="../text/joining.doc">here</a>.</p>

 

:link must be coded before :hover

 

You can also add

:visited and :active

The usual order is

:link

:visited

:hover

:active

Edited January 25, 2012 by Wickham

[Lulu]

try wrapping it in a span tag?

 

html:

<p>You can download a joining form <span class = "span_underline"><a class="here" href="../text/joining.doc">here</a></span>.</p>

 

css:

.span_underline {

text-decoration: underline;

}

 

 

Thanks for your post. I'll try your suggestions. I have to admit, I haven't quite got my head around span yet!

 

---edit---

or a better solution, dont add span class at all and "text-decoration: underline;" to your .here class in the css file

 

Do you mean that I should create another style called .here - if so, how do I attached 2 styles? I tried attaching "text-decoration:underline" to my .here:hover style but it only shows when you hover over it and I wanted it showing all the time.

 

[Lulu]

Thanks, Wickham. I'll try out what you've suggested.

 

I've just realised that you may have answered the question I asked J Stern, ie how do I attach two styles. How does a class of "here" work when there are two styles (here:link and here:hover), is it to do with pseudo classes ... I'm probably talking complete tosh here!!

[Wickham]

My reply was about link (or hyperlink) states where you can have different styles for link (normal unvisited), visited, hover and active (as you press the mouse button).

 

Additionally you can have more than one class for a tag (but only one ID beginning with #), with a space between them like this:-

CSS

.type1 { background: #eee; }
.here:link	{ color:red; text-decoration:underline;	}
.here:hover	{ color:#00F;	}

HTML markup:-

<p>You can download a joining form <a class="here type1" href="../text/joining.doc">here</a>.</p>

Edited January 26, 2012 by Wickham

[addison540]

HI i am addison,new to this forum,nice post. [Link deleted]

[LSW]

Hi! Why do spammers always say "Nice post" is threads where it makes no sense whatsoever?

[Lulu]

Thanks for getting back to me, Wickham. I see what you are saying. I didn't know that you could add two classes, providing they are not id's so thanks again!