Jump to content

Best way to underline a single word?


Lulu

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>

Link to comment
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
Link to comment
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
Link to comment
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.

 

:)

Link to comment
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!!

Link to comment
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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...