Style Sheets in HTML

potski · #1 Apr 29, 2007, 08:28 PM

Hello!

I have two sets of links inside my web page:

Link 1
Link 2
Link 3

Link A
Link B
Link C

When I put the mouse over Link 1-3, I'd like for it to change the font color to BLUE.
a:hover{text-decoration: color: #4040FF;}

For Link A-C, I'd like for it to change to RED when I put the mouse over it.
a:hover{text-decoration: color: #FF0000;}

I currently have this inside my <HEAD> tag:

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
</style>

...but it affects the whole links inside my site. I want to be able to control the font color of
each of my links once the mouse is placed over it.

If anyone can help me accomplish this, I'd really appreciate it.

Thanks,

Potski

Northwind_Dagas · Apr 30, 2007, 01:25 PM

You need to use some classes to differentiate between the two types of links.

Give the two link types some names. In this example, I will use "primary" for 1,2,3 and "secondary" for A,B,C.

<HEAD> tag:

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
a.primary:hover{text-decoration: color: #4040FF;}
a.secondary:hover{text-decoration: color: #FF0000;}
</style>

Then, in your link codes:

<a href="link1.html" class="primary">Link 1</a>
<a href="link2.html" class="primary">Link 2</a>
<a href="link3.html" class="primary">Link 3</a>

<a href="linka.html" class="secondary">Link A</a>
<a href="linkb.html" class="secodnary">Link B</a>
<a href="linkc.html" class="secondary">Link C</a>

Remember that classes are case sensitive so if you use caps in the head, use them in the links as well. Good luck!

potski · Apr 30, 2007, 08:46 PM

Quote:

Originally Posted by Northwind_Dagas

You need to use some classes to differentiate between the two types of links.

Give the two link types some names. In this example, I will use "primary" for 1,2,3 and "secondary" for A,B,C.

<HEAD> tag:

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
a.primary:hover{text-decoration: color: #4040FF;}
a.secondary:hover{text-decoration: color: #FF0000;}
</style>

Then, in your link codes:

<a href="link1.html" class="primary">Link 1</a>
<a href="link2.html" class="primary">Link 2</a>
<a href="link3.html" class="primary">Link 3</a>

<a href="linka.html" class="secondary">Link A</a>
<a href="linkb.html" class="secodnary">Link B</a>
<a href="linkc.html" class="secondary">Link C</a>

Remember that classes are case sensitive so if you use caps in the head, use them in the links as well. Good luck!

Hello. Thanks for replying. I tried the exact same codes you gave me, but it doesn't
seem to work. I don't know what I'm doing wrong. Below is my actual HTML coding:

<html>

<head>

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
a.primary:hover{text-decoration: color: #808080;}
a.secondary:hover{text-decoration: color: #FF0000;}
</style>

</head>

<body link="green" vlink="green" alink="green">

<a href="link1.html" class="primary">Link 1</a> <br>
<a href="link2.html" class="primary">Link 2</a> <br>
<a href="link3.html" class="primary">Link 3</a>

<br><br><br>

<a href="linka.html" class="secondary">Link A</a> <br>
<a href="linkb.html" class="secondary">Link B</a> <br>
<a href="linkc.html" class="secondary">Link C</a>

</body>
</html>

...it only follows the first hover line "a:hover{text-decoration: underline; color: #4040FF;}"
I hope you can help me out and point out what I did wrong.

Thanks,

Potski

Northwind_Dagas · May 1, 2007, 08:07 PM

It would seem that I carried over a mistake from your original code. In the folowing two lines:
a.primary:hover{text-decoration: color: #808080;}
a.secondary:hover{text-decoration: color: #FF0000;}
There is a text-decoration: statement with no declaration. If you want a text decoration, such as underline, you must add it after the satement, as well as a semicolon. If you do not want anything other than the color change on hover, replace those two lines with these:
a.primary:hover{color: #808080;}
a.secondary:hover{color: #FF0000;}

Good luck!

potski · May 1, 2007, 09:21 PM

Quote:

Originally Posted by Northwind_Dagas

It would seem that I carried over a mistake from your original code. In the folowing two lines:
a.primary:hover{text-decoration: color: #808080;}
a.secondary:hover{text-decoration: color: #FF0000;}
There is a text-decoration: statement with no declaration. If you want a text decoration, such as underline, you must add it after the satement, as well as a semicolon. If you do not want anything other than the color change on hover, replace those two lines with these:
a.primary:hover{color: #808080;}
a.secondary:hover{color: #FF0000;}

Good luck!

It works now

Thank you so much!
You've been a great help!

Regards,

Potski



At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to: Get free answers from experts in any of our 300+ topics. Accept money for answers that you provide. Communicate privately with other members (PM). See fewer ads. Sign Up!