Hyperlink color

Joined
Jul 9, 2012
Messages
8
Reaction score
0
Points
1
Hi, I am trying to figure out why my links keep changing colors even though I am trying to properly format them in the css style in the <head>. See attached screen shot and link to page.

here is how the code looks:

<style type="text/css">
a:link {color: #CCFFCC;} /* unvisited link */
a:link {color: #CCFFCC;} /* visited link */
a:link {color: white;} /* mouse over link */
a:link {color: #CCFFCC;} /* selected link */
p {color: white; }
p {font-family: "Georgia", Times, serif; }
body {background-color: black; }
....

this is indeed making the color of the unvisited link the proper color, but once I visit a link it goes to a dark blue and I can't figure out how to change that to where it is stable. Also, the mouseover doesn't change it to white.

Also, I can't figure out what is making the weird A A with the accent after the "length" of the songs... Thanks in advance for any help!

Music

(outdated link removed)
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
Moved to a more appropriate forum.

The problem here is simple - you're setting the colour of links four different times. Here's the excerpt:
Code:
a:link {color: #CCFFCC;} /* unvisited link */
a:link {color: #CCFFCC;} /* visited link */
a:link {color: white;} /* mouse over link */
a:link {color: #CCFFCC;} /* selected link */
As you can see, you're using the same property over and over. Thus, you're only styling the colour of the link but not the visited, active or hover values. These are the properties you want:
Code:
A:link
A:visited
A:active
A:hover
 
OP
W
Joined
Jul 9, 2012
Messages
8
Reaction score
0
Points
1
Thanks for the prompt response! I will try that out and see if I can solve this problem.

Any idea what causes that weird looking "A" after the Length description? That screenshot is actually an iframe reading from this page:
Playlist

Thanks!
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
Nothing's "causing" per se other than the fact that those characters exist in the source of the page. Remove them and all will be well.
 
OP
W
Joined
Jul 9, 2012
Messages
8
Reaction score
0
Points
1
I changed the css script as follows and I am still having the same issue:

Music

A:link {color: #CCFFCC;} /* unvisited link */
A:visited {color: #CCFFCC;} /* visited link */
A:hover {color: white;} /* mouse over link */
A:active {color: #CCFFCC;} /* selected link */

Sorry, I am still new to a lot of this stuff so I tend to need a lot of explanation. Thanks!
 

Raz0rEdge

Well-known member
Staff member
Moderator
Joined
Jul 17, 2009
Messages
15,745
Reaction score
2,071
Points
113
Location
MA
Your Mac's Specs
2022 Mac Studio M1 Max, 2023 M2 MBA
Here ya go: CSS Styling Links

The "Try it Yourself" is great for you play with and understand how it's working..
 
Joined
Mar 7, 2009
Messages
17
Reaction score
0
Points
1
Location
Brisbane Qld Aust
Your Mac's Specs
27 inch, iMac, Mountain Lion
I changed the css script as follows and I am still having the same issue:

Music

A:link {color: #CCFFCC;} /* unvisited link */
A:visited {color: #CCFFCC;} /* visited link */
A:hover {color: white;} /* mouse over link */
A:active {color: #CCFFCC;} /* selected link */

Sorry, I am still new to a lot of this stuff so I tend to need a lot of explanation. Thanks!

As an example of one of my external css files links, try this below;

/* Links formatting */
a:link, a:visited, a:active {
font-family: Verdana, sans-serif;
color: #1e90ff; /* DodgerBlue */
font-size: 17px;
font-weight: 500;
text-decoration: underline;
}
a:hover {
font-family: Verdana, sans-serif;
color: #ff0000; /* Red */
font-size: 17px;
font-weight: 500;
text-decoration: none;
}

Remember, it’s as Raz0rEdge says, “Try it yourself,” it can be a lot of phunn, ;D
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top