Solved

Overriding css link color

Posted on 2008-10-17
7
1,572 Views
Last Modified: 2012-05-05
I'm trying to override the css specified link color for specific links. It doesn't work.
Here's the css:
a:link {
      color: #FFFFFF;
      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      text-decoration: none;

}
a:link.blackone {
      color: #000000;
      font-family: tahoma;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;

}

Here's my html:

                              <tr>
                                    <td colspan="2" class="pt9"><b>Our Portfolios:</b><br><br>
                                    <a class="blackone" href="pfolio_wws.htm">Walks, Walls & Steps</a> | <a class="blackone" href="pfolio_patios.htm">Patios</a> | <a class="blackone" href="pfolio_landscaping.htm">Landscaping</a></font></td>
                              </tr>                  
See www.rkassociates.com/evergreend/pfolio_patios.htm

In FireFox the LAST link is correct, the other two text is white.

What's wrong
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22746141
simply do not use the class="blackone" on these links, and they will be white.  Say you want blue, then --

a:link.blue {
      color: #0000CC;
      font-family: tahoma;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;

<A href=file.html class="blue"  . etc >

Remember, you also have to style the A.link, A.hover, A.visited, and A.active to get a full CSS on the link.

The other way to do this is to put the color you want INLINE, after the link --

A href="file" style="color:#00CC00;" >

if you put the inline style AFTER the class, it will override the color in the class.
Remember, CSS is cascading, meaning the LAST styling is the applicable one for the link.
0
 

Expert Comment

by:wheirddisco
ID: 22746158
/* WITHOUT USING CSS CLASS */

HTML:
<a href="LINK">Link Name</a>

CSS:
a { color: #COLOR }
a:visited { color: #COLOR }
a:hover { color: #COLOR }



/* USING A CSS CLASS */

HTML:
<a href="LINK" class="link">Link Name</a>

CSS:
a.link { color: #COLOR }
a.link:visited { color: #COLOR }
a.link:hover { color: #COLOR }


Feel free to include whatever other styles you want in there.
0
 

Author Comment

by:Richard Korts
ID: 22746259
To scrathcyboy:

The inline version worked. The other was exactly what I already had, so it didn't work in the first place.

How can I change the "hover" color, in-line?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22746289
< A href= "file.html" style="A.hover color:#0CFFFF; A.visited color:#0000CC;" >

try that, it is all in the symantics of the right colons, spaces, periods and equals signs.
If one layout doesn't work, try another, it is only way to learn the "difficult" CSS terminology.
Remember, after each CSS statement, there must be a semi colon, and " " enclosing the lot.
0
 

Expert Comment

by:wheirddisco
ID: 22746305
There isn't a way to change the "hover" color using in-line CSS. You'll need to do that through javascript.

When you're trying to target a class in CSS though, you need to specify the class first before you can specify hover or visited:

INSTEAD OF:
a:hover.class

USE:
a.class:hover

0
 

Author Comment

by:Richard Korts
ID: 22746344
To scrathcyboy:

The hover doesn't work. But you answered the basic question. You get the points.

I thought CSS was the be-all, end-all. I also though you could OVERRIDE global css with local.

I am going to fix this by using <a href> with images & mouseover / mouseout to get the desired effect.
0
 
LVL 42

Expert Comment

by:David S.
ID: 22746387
*sigh* You can override it.

Perhaps fixing your HTML and CSS errors would resolve this.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

I don't remember if it makes a difference, but it's more common to put pseudo-classes last, so "a:link.blackone" would be "a.blackone:link".

Also it's best to avoid naming classes based on their appearance.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question