Member Avatar for arvindikchari

Hello


I am a beginner to css, i coded a page where everything is shown fine, except for one problem: The links on the page are all in white, which also happens to be the page background.

I would like all links on the page to be shown in black color, how is this coded. Also I would like to mention here that a number of elements on the page load from different external css files

Regards
Arvind

  • 4 Contributors
  • 4 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by arvindikchari

Dani AI

Generated

Useful follow-up and troubleshooting notes based on this thread.

The immediate cause reported by was an external stylesheet setting link color to white. That is the most common root: a global rule, a framework utility class, or a parent element’s color is forcing anchors to inherit white. When many CSS files are loaded, later rules or more specific selectors can override earlier ones.

A concise troubleshooting flow:

  • Open the browser DevTools, Inspect the problematic <a>, and check the Styles/Computed panel to see which rule sets color and which file/line it comes from.
  • Check for inline styles or rules with !important; these override normal cascade rules.
  • Check parent elements for a color declaration; anchors inherit color unless explicitly styled.
  • Verify stylesheet load order in the HTML; custom CSS should usually load after library/framework CSS.

Practical fixes (safe options first):

  • Put a targeted rule after the framework files, scoped to the content area, for example:

    .main-content a { color: #000; }

    This avoids stomping on framework components.

  • Prefer scoped selectors or CSS variables (so the site link color is maintained centrally) rather than global overrides.

  • Avoid !important except as a last resort; it makes later debugging harder.

Minor corrections from the thread: the HTML attribute to attach a style class is class (not a custom css attribute) — browsers ignore unknown attributes for styling. Contrast should also be checked so links remain visible in all states; a quick contrast tool is available at WebAIM. For deeper reading on why one rule wins over another, see MDN’s CSS specificity notes.

Recommended Answers

All 4 Replies

Member Avatar for ravi_9793

The default color of link is blue. But if you have defined some class in CSS file, than link color will appear as you have defined in class.

CSS code should be something like this

a:link { 
	color: #333333;
	}
a:visited { 
	color: #00000;
	}
a:hover { 
	color: #CCCCCC;
	background-color: #333333;
	text-decoration: none;
	}
a:active { 
	color: #456980;
	}
Member Avatar for expvice

Moreover you can make class for specific use of css such as

loginLink.a:link { 
	color: #333333;
	}
.loginLink a:visited { 
	color: #00000;
	}
.loginLink a:hover { 
	color: #CCCCCC;
	background-color: #333333;
	text-decoration: none;
	}
.loginLink a:active { 
	color: #456980;
	}a:link { 
	color: #333333;
	}
.loginLink a:visited { 
	color: #00000;
	}
.loginLink a:hover { 
	color: #CCCCCC;
	background-color: #333333;
	text-decoration: none;
	}
.loginLink a:active { 
	color: #456980;
	}

and then use it like that <a href="expvice.com" alt='We are 24 hours online for helping in programming' css='loginLink'>Login</a>

Member Avatar for Member #360561 
loginLink.a:link {
color: #333333;
}

<a href="expvice.com" alt='We are 24 hours online for helping in programming' css='loginLink'>Login</a>

Ehhh... shouldn't that be class='loginLink' ? :)

Edited by happygeek because: fixed formatting
Member Avatar for arvindikchari

Hello all

Thanks for the help, I found the code where the css had specified the link color as white and I have corrected it, it is now displaying fine.

Thanks again,
Arvind

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.