Jump to content
Killersites Community
Sign in to follow this  
Lulu

Best way to underline a single word?

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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 by J Stern

Share this post


Link to post
Share on other sites

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 by Wickham
  • Upvote 1

Share this post


Link to post
Share on other sites

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.

 

:)

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×