Member Avatar for davy_yg

index.html

<div id="container">
	<div id="header">
	<h1><a href="#">Ock Associates</a></h1>
	<ul id="nav">
   		<li><a href="#">HOME</a></li>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">PRACTICE AREA</a></li>
		<li><a href="#">NEWS</a></li>
        <li><a href="#">PUBLISHED BOOKS</a></li>
        <li><a href="#">CONTACT US</a></li>
	</ul>
    
	<ul id="topcorner">
		<li><a href="#">Career</a> | <a href="#">Mail</a></li>
	</ul>

style.css

#header ul#topcorner {
		float: right; margin: 20px 50px 0 0;	
		font: 12px Arial, Helvetica, sans-serif; color: white; 
	}

I thought I already set the font color to white but in actual I still see a blue link font color. How to set it to white ?

  • 2 Contributors
  • 3 Replies
  • 85 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Quick summary tied to the thread: set color: white on the parent #header ul#topcorner but still saw blue links. was right that anchors need explicit rules, and that you can remove underlines with the text-decoration property. The gap in the original replies was not showing a concise, robust rule that covers all link states and avoids selector redundancy.

A compact, practical rule to apply (use the #topcorner id directly rather than ul#topcorner) — make sure you cover both unvisited and visited states, and keep hover/active separate:

#topcorner a,
#topcorner a:visited {
    color: #fff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#topcorner a:hover,
#topcorner a:active {
    color: #eee;
    text-decoration: none;
}

Notes and troubleshooting:

  • Keep pseudo-class order sensible (link/visited first, then hover/active) and target the same specificity for all states so one rule does not get overridden. See MDN on CSS specificity for how rules win: Specificity.
  • Modern browsers restrict which styles apply to :visited for privacy, but color changes are allowed; read about :visited restrictions here: ":visited" on MDN.
  • If the link still appears blue, inspect the element with browser devtools to see what rule is winning (computed style). Look for inline styles, other stylesheet rules, or caching. As a last-resort test you can increase selector specificity or temporarily use !important to confirm the override, then refactor away from it.
  • Finally, keep contrast and accessibility in mind when using white text on a background.

Recommended Answers

All 3 Replies

Member Avatar for teedoff

You need to style the <a> tag font color. By default, linked text is blue and underlined.

Member Avatar for davy_yg

style.css

#header ul#topcorner a:link{
     font: 12px Arial, Helvetica, sans-serif; color: white;
     }

How to erase the underline ?

Edited by davy_yg because: n/a
Member Avatar for teedoff

You should really do some studying. This is basic stuff. http://www.w3schools.com is a great place to learn the fundamentals.

a {text-decoration: none;}
Edited by teedoff because: n/a
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.