Member Avatar for trixma

Hey guys,

I'm trying to make a link appear as white text in all states (idle, hover, visited, click)
but for some reason my idle state does not conform to my CSS. Could someone have a look and maybe help me solve the issue?

here's my CSS:

a.nav:link { 
	color: white;
	text-decoration: none;
	font-size: 135%;
	font-weight: bold
	}

a.nav:visited { 
	color: white;
	text-decoration: none;
	font-size: 135%;
	font-weight: bold
	}

a.nav:hover { 
	color: white;
	text-decoration: none;
	font-size: 135%;
	font-weight: bold
	}

a.nav:active { 
	color: white;
	text-decoration: none;
	font-size: 135%;
	font-weight: bold
	}

And here is my HTML (The css is properly linked, I am not using any css for the <p> element):

<p><a href="ishiyama.html" class="nav">&nbsp; Home</a></p>

Thanks,
trixma

  • 2 Contributors
  • 3 Replies
  • 269 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by shaya4207

Dani AI

Generated

Good catch by — the idle (default) state of an anchor is the element itself, so use a.nav for the base style rather than a.nav:link. :link only matches unvisited links and :visited matches visited ones; setting the plain selector establishes the default that hover/active/visited can override. As confirmed, switching to the base selector fixes the symptom.

A concise, maintainable pattern is to set the base rules on a.nav, then only override interaction states when they need to differ. For example:

a.nav {
  color: #fff;
  text-decoration: none;
  font-size: 1.35em;
  font-weight: 700;
}

a.nav:hover,
a.nav:active { color: #fff; }

a.nav:focus { outline: 2px solid #fff; outline-offset: 3px; }

When the style still looks wrong, use the browser DevTools (Computed/Rules panel) to see which rule wins. Common culprits: a later stylesheet, a more specific selector (e.g. #nav a), inline styles, or a CSS reset/framework that sets link colors. The order of pseudo-classes matters in practice — follow the LVHA pattern (:link, :visited, :hover, :active) — and prefer increasing specificity or reordering rules over !important.

Finally, add :focus for keyboard accessibility and remember modern browsers limit what :visited can change for privacy — don’t rely on complex visual transitions for visited links.

Recommended Answers

All 3 Replies

Member Avatar for shaya4207

The idle state is just a , not a:link

Member Avatar for trixma

The idle state is just a , not a:link

Thanks! this fixed it.

Member Avatar for shaya4207

My pleasure... Please mark this post as 'solved', thanx

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.