CODEWITHSUNDEEP
htmlcsstextcolorshyperlink
user4259217
user4259217

Reputation:

hyperlink colour not changing?

I am having trouble trying to get my link to stay white.
This is the Head code.

float1 {
  position: absolute;
  width: 250px;
  height: 40px;
  z-index: 1;
  left: 40px;
  top: 300px;
  font-size: 35px;
  background-color: black;
  color: white;
  text-align: center;
  color: white;
  text-decoration: none;
}
<div id="float1">
  <font color="white"><a href="#" onclick="myfun();">Home</a></font>
</div>

Upvotes: 1

Views: 2504

Answers (3)

MoonPoint
MoonPoint

Reputation: 171

If you want to keep the color white, even after the link has been visited, etc., the following apply depending on your preference for the cases for which the link text should be white:

/* unvisited link */
a:link { color: white; }

/* visited link */
a:visited { color: white; }

/* mouse over link */
a:hover { color: white; }

/* selected link */
a:active { color: white; }

Or, if you do want all links on the page to be white, rather than just one particular link, for all of the above conditions, you could use just the following in a style section for the page or in a CSS file loaded for the webpage:

a { color: white; }

As mentioned, the font tag isn't what you should use to set the color of a hyperlink and should be removed. The font tag has also been deprecated, though I don't know of any browser that does not still support it.

Example

Upvotes: 0

unbindall
unbindall

Reputation: 514

The <font> tag is no longer supported. But you can use style="" as an alternative.

<a style="color:white" href="#" onclick="myFun();">Home</a>

Upvotes: 1

jmore009
jmore009

Reputation: 12923

Anchor tags by default have their own attributes if an href is present (to show the user that it is a link)

You need to add the color directly to the a tag:

#float1 a{
  color: #FFF;
}

or to all a tags if you prefer:

a{
   color: #FFF;
}

FIDDLE

OR

You can use color: inherit on the a which will then inherit it from its parent:

#float1 a{
  color: inherit;
}

ALT FIDDLE

and remove the <font></font> tags as they are not supported in HTML5

Upvotes: 5

Related Questions