Member Avatar for <M/>

I have 2 different links, I want one to be blue (as an example) and the other to be red... but for some odd reason I can't see what's causing all of the links to be the same colors.... can someone help?
Thanks in advance!

  • 4 Contributors
  • 5 Replies
  • 99 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by avinanuami

Dani AI

Generated

Quick note that builds on , and : using classes (or IDs) for different link groups is the simplest, most maintainable fix. When two link styles unexpectedly collapse into one, it’s almost always the cascade/specificity or link-state differences — not a browser bug.

How to troubleshoot (fast):

  • Right‑click the problem link → Inspect. In the Computed / Styles panel you can see exactly which rule sets color and which stylesheet/line wins. For how selector weight is decided, see Specificity.
  • Look for a higher‑specificity rule (e.g., .nav a), a later stylesheet that overrides earlier rules, or an inline style / !important.
  • Check parent elements: color is inherited, so a parent with a set color will affect links unless the link itself is styled.
  • Ensure you style the states you care about (unvisited/visited/hover/focus/active). Browsers also limit what you can change on :visited for privacy reasons — details at :visited pseudo-class.

Small pattern you can use to keep section-level link colors tidy (uses CSS variables so you don’t repeat values):

.section {
  --link: #c33;
  --link-visited: #940;
}
.section a { color: var(--link); }
.section a:visited { color: var(--link-visited); }
.section a:focus { outline: 2px solid #055; } /* keeps keyboard users visible */

Quick checklist before posting code: inspect computed styles, search for global a rules or resets, check load order, and if you need different colors per area use container classes or variables rather than fighting specificity.

Recommended Answers

All 5 Replies

Member Avatar for Octet

Could you post your CSS file?
The easiest way to do it is with a class, something like this would work:

.LinkA a:link{
    font: 15px Arial;
    color: #FF0000; // Red
    text-decoration: underline;
}

.LinkB a:link{
    font: 15px Arial;
    color: #000DFF; // Blue
    text-decoration: underline;
}

Obviously you would want to change it to your styles, but that should solve any colour problems.

Member Avatar for <M/>

WOW... I can't believe i didn't notice that! You just solved everything... thanks :)

Member Avatar for Octet

NP,

You have four types of links, a:link a:active a:visited and a:hover

a:link is your standard sort of link, the ones you see when you load the page
a:active is the link which appears when you click, by default it is red
a:visited is after the link has been clicked, by default it is purple
a:hover is when you mouse over, so you can do some cool things like underline them and change the font colours when moused over for additional clarity and style. It is a lot easier then using JS to do it for sure!

I hope that clarifies it, any more questions then just ask!

Edited by Octet
Member Avatar for JorgeM

Its also a good practice to apply the styles in the this order:

a:link
a:visited
a:hover
a:active

Member Avatar for avinanuami

You can use class or id attribute of anchor tag!
Ex:

<a href="a.htm" id="red">
<a href="a.htm" id="blue">

And then use CSS.
like:

a.red{color:red}
a.blue{color:blue}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.