how can I use two different hyperlink styles on the same page?

[Helen Liddell]

Goal: 1.have white hyperlinks on a page that are only underlined when user
hovers. 2. have typical blue underlined links on other parts of the same
page.

Below is the code on my .css page I did, but when I link the style sheet to
my page, my link is underlined when you do not hover. Did I write the code
wrong? Also, even if I get past this problem of getting my white links to
work properly, how will front page know when to use the white links and when
to use the blue links?
<p>a:link {<br>
font-family: Arial, Helvetica, sans-serif;<br>
font-size: 10px;<br>
font-style: normal;<br>
color: #FFFFFF;<br>
text-decoration: none;<br>
}</p>
<p>a:active {<br>
font-family: Arial, Helvetica, sans-serif;<br>
font-size: 10px;<br>
font-style: normal;<br>
color: #FFFFFF;<br>
text-decoration: none;<br>
}</p>
<p>a:hover {<br>
font-family: Arial, Helvetica, sans-serif;<br>
font-size: 10px;<br>
font-style: normal;<br>
color: #FFFFFF;<br>
text-decoration: underline;<br>
}</p>
<p>a:visited {<br>
font-family: Arial, Helvetica, sans-serif;<br>
font-size: 10px;<br>
font-style: normal;<br>
color: #FFFFFF;<br>
text-decoration: none;<br>
}</p>

 

[Steve Easton]

Where did all of the formatting marks come from. ( <p> <br> and such
They are not legal in a css file. It should look like this:

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
}


For different effects for different links in the same page, create different classes and
assign the class to the links

..white
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
}

..blue
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
}
Assign the class like this without the leading period

class="white"
class="blue"


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed..................
...............................with a computer

 

[RG at UW]

You need to use a "style" name prior to each line of code. Then format the
particular hyperlink with the style which will now be available in the style
dropdown box in the left top formatting mennu. It probably says "normal" now.
Here is an example.

..rsghoverlook a:link {color:#0000ff;font-family:Verdana;font-size:10pt;
text-decoration: none }
..rsghoverlook a:visited {color:#0000ff;font-family:Verdana;font-size:10pt;
text-decoration: none}
..rsghoverlook a:hover {color:#CC9900;font-family:Verdana;font-size:10pt;
text-decoration: underline}


..bannerlinks a:link {color:"white";font-family:bank gothic LT
BT,Verdana;font-size:10pt; text-decoration: none }
..bannerlinks a:visited {color:"white";font-family:bank gothic LT
BT,Verdana;font-size:10pt; text-decoration: none}
..bannerlinks a:hover {color:#990000;font-family:bank gothic LT
BT,Verdana;font-size:10pt; text-decoration: underline}

 

[Helen Liddell]

Thanks! I am new to web design, and not strong with code. I removed the
formating marks, and got the white links to look right. Regarding getting
different effects for different links on the same page by creating different
classes and assigning the class to the links....not too sure how that works.
Do I put all of this:

..white
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
}

..blue
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #0000FF;
text-decoration: underline;
}

class="white"
class="blue"

in my whiteLink.css style sheet?

I got the effect (a typical blue link) I was looking for, by making a link,
right click selected it, chose hyperlink properties, and made it blue and
underlined.

Is there a way to just say it all in my one style sheet to address both
types of links, so its more efficient?

 

[Murray]

This is the really awkward way to do it.

A much better way would be to use a descendent selector, e.g.,

a { color:green; } /* this will style all <a> tags on the page except those
styled below */
#menu a ( color:red } /* this will style all <a> tags that are in a
container with an ID of 'menu" */

So, with this HTML -

<p><a href="link.html">This will be styled with the first rule</a></p>
<div id="menu">
<p><a href="link2.html">This WOULD be styled by the first rule, except the
second one has a higher specificity, and it will be used to style this link
as you can see from the red color.</a></p>
<p><a href="link3.html">And similarly for this one.</a></p>
</div>

This method does not require that you clutter your CSS with perhaps obscure
custom class named, and it also doesn't require that each individual <a> tag
be explicitly styled with those classes. It relies on the cascade of styles
into the div#menu as determined by the second CSS rule.