Forum Moderators: not2easy
I'm a newbie to this forum and to CSS so you will have to excuse my lack of knowledge regarding this matter.
I am trying to display a link (white text) as underlined (in white) only when the users mouse is over the keyphrase. From my limited knowledge of CSS i tried to incorporate the following in the head of my document:
<link rel="stylesheet" href="main.css" media="screen">
<style type="text/css"><!--
w { color: white}
w:link{ color: white }
w:visited { color: red }
w:hover { text-decoration: underline }
w:active { color: white }
--></style>
My link is displayed as the following:
<td width="85" valign="middle" bgcolor="#999966" height="48" align="center"><a href="http://www.myurladdress.com"><w>Keyphrase</w></a></td>
My page will have multiple colored text with similiar corresponding (hover) attributes. For example:
(white - no mouse hovering) keyphrase
(white - white underlined w/ mouse hovering) keyphrase
(black - no mouse hovering) keyphrase
(black - white underlined w/ mouse hovering) keyphrase
(red - no mouse hovering) keyphrase
(red - white underlined w/ mouse hovering) keyphrase
How do I assign css scripts to the above muliple keyphrases?
How would I assign css scripts if I had multiple keyphrases in a table?
<a href="http://www.myurladdress.com"><w>Keyphrase</w></a>
Instead of using that, try this:
<a href="http://www.myurladdress.com" class="w">Keyphrase</a>Also, in this case, since you are using "w" as a class, in the css it should be defined like this:
<style type="text/css"><!--
.w:link{ color: white }
.w:visited { color: red }
.w:hover { text-decoration: underline }
.w:active { color: white }
--></style>Now, if you want to have ALL of your links on that page do this: instead of ".w" use "a" as in <a href=... This will effect all of your anchor tags.
You may want to check out this site, www.w3schools.com/css/default.asp for some great, easy to understand tutorials on CSS.
Jennifer
Since i'm using multi-colored keyphrases on the same page, can I assign other <B> black <r> red properties similiar to your explanation?
a.red {color:#FF0000;text-decoration:none;}
a.red:hover {color:#FF0000;text-decoration:underline;}
a.black {color:#000000;text-decoration:none;}
a.black:hover {color:#000000;text-decoration:underline;}
a = anchor
.color = class name
In HTML:
<a class="black">Text</a> will have the black hyperlink that has an underline upon mouseover.
Hope this adds to help.
--Jim---
<a class="black">Link 1</a>
<a class="white">Link 2</a>
<a class="red">Link 3</a>
Can all be in the same paragraph/page/whatever, and have different link appearances, since they call upon the class of the different appearances.
--Jim---
Thank you for your help and your quick response.
Happy trails!
--Jim---
As a sidenote though, you may want to think of using different class names. You may want some text to be black now, but maybe later you'll want it to be green. So, instead of changing all instances of class="black" to class="green", try to describe what the text is, ie .mainText, .itemDescription, etc. that way you'll only have to make one change in your css file.
Jennifer
So as an example the above code would read:
a.maintext {color:#ffffff;text-decoration:none;}
a.maintext:hover {color:#ffffff;text-decoration:underline;}
In HTML:
<a class="maintext">Text</a>
Or, even better yet, if you have quite a few links in the .mainText area, instead of adding the class to each link, wrap the main text in a <div> and give that a class="mainText"
Jennifer
