Multiple colors for a:links

HTML & CSS
1

On this website, I set an a:link definition that’s blue for text. http://grantsetcetera.com/index.html

I want to have a different a:link color for the Level 3 text buttons. I thought that the approach I used in the text below would enable me to have other colors for the text links but, obviously, I was wrong. Where is my mistake?

http://grantsetcetera.com/pages/credits.html

LINK DEFINITION FOR MOST TEXT
a:link {
font-family:Frutiger, “Frutiger Linotype”, “Helvetica Neue”, Helvetica, Univers, Calibri, “Myriad Pro”, Myriad, “Gill Sans”, “Gill Sans MT”, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, Arial, sans-serif;
/** font-style:normal;
font-weight:normal;
font-variant:normal; **/
text-transform:none;
text-decoration:none;
color:#0066CC;
}
a:visited {
font-family:Frutiger, “Frutiger Linotype”, “Helvetica Neue”, Helvetica, Univers, Calibri, “Myriad Pro”, Myriad, “Gill Sans”, “Gill Sans MT”, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, Arial, sans-serif;
font-style:normal;
line-height:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-decoration:none;
}
a:hover {
font-family:Frutiger, “Frutiger Linotype”, “Helvetica Neue”, Helvetica, Univers, Calibri, “Myriad Pro”, Myriad, “Gill Sans”, “Gill Sans MT”, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, Arial, sans-serif;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-decoration:underline;
color:#EE0000;
}
a:active {
font-family:Frutiger, “Frutiger Linotype”, “Helvetica Neue”, Helvetica, Univers, Calibri, “Myriad Pro”, Myriad, “Gill Sans”, “Gill Sans MT”, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, Arial, sans-serif;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-decoration:underline;
color:#66CCFF;
}

LINK DEFINITION FOR L-3 BUTTONS
#nav_l3_btn {
width: 110px;
height: 45px;
padding-top: 10px;
padding-right: 10px;
/** padding-bottom: 25px; /
padding-left: 25px;
/ margin-bottom: 25px; **/
float: left;
height: 35px;
background-position: center;
}

.nav_l3_btn {
font-family: “Helvetica Neue”, Helvetica, “Trebuchet MS”, Geneva, Arial, sans-serif;
font-size: 11px;
line-height: 11px;
color: #FFFFFF;
font-style:normal;
font-weight:bold;
/** font-variant:normal; **/
text-transform:none;
text-decoration:none;
vertical-align: middle;
letter-spacing: 0.1em;
}

.nav_l3_btn a:link {
font-family: “Helvetica Neue”, Helvetica, “Trebuchet MS”, Geneva, Arial, sans-serif;
color: #FFFFFF;
text-transform:none;
color:#0066CC;
}

.nav_l3_btn a:hover {
font-family: “Helvetica Neue”, Helvetica, “Trebuchet MS”, Geneva, Arial, sans-serif;
color: #FF0000;
text-transform:underline;
}

.nav_l3_btn a:visited {
font-family: “Helvetica Neue”, Helvetica, “Trebuchet MS”, Geneva, Arial, sans-serif;
color: #DDDDDD;
text-transform:none;
}

.nav_l3_btn a:active {
font-family: “Helvetica Neue”, Helvetica, “Trebuchet MS”, Geneva, Arial, sans-serif;
color: #FFFFFF;
text-transform:underline;
}

Thanks,
Nicky

2

Hi, in your HTML you define the level 3 as an ID. However in most of your CSS you reference it as a class (using the period (.))

Change the Css to #'s and not . for hte level 3 CSS :slight_smile:

3

Be careful though, because you’re using the same nav_l3_btn ID multiple times in the same HTML page, and that’s a no-no.

4

Your fix worked. It also turned out, when I went through my definitions one more time, that I had two different colors in my a:link spec.

Thanks, also, for warning me about using multiple instances of a div with the same name. What is the best alternative? I looked in the CSS reference from Sitepoint, and I didn’t see an answer to that question.

#nav_l3_btn {
font-family: “Helvetica Neue”, Helvetica, “Trebuchet MS”, Geneva, Arial, sans-serif;
font-size: 11px;
line-height: 11px;
color: #FFFFFF;
font-style:normal;
font-weight:bold;
text-transform:none;
text-decoration:none;
vertical-align: middle;
letter-spacing: 0.1em;
width: 110px;
height: 45px;
padding-top: 10px;
padding-right: 10px;
padding-left: 25px;
float: left;
height: 35px;
background-position: center;
}

#nav_l3_btn a:link {
color: #FFFFFF;
text-transform:none;
}

#nav_l3_btn a:hover {
color: #FF0000;
text-transform:underline;
}

#nav_l3_btn a:visited {
color: #EEEEEE;
text-transform:none;
}

#nav_l3_btn a:active {
color: #FFFFFF;
text-transform:underline;
}

5

Oops, sorry Ryan, it looks like I placed my thank you after the next person’s post.

6

It’s alright :). We are all just here to help, not get tons of thank yous ;).

If you need a segment on the page to appear twice, aka in this case, if you need to repeat that div, just change it to a class instead of using IDs :).

PS-The order of pseudo classes is :link, visited, hover, active. You have the wrong order