Link Font Color Problem

Question

I've been having a problem with the font color of the links on the template I have been working on. Please take a look at the code:

http://www.wendyhenrichs.com/prob/

You'll notice that the color of my header link is the same color as the links on my navigation bar.

How can I seperate these different styles?

Thanks!

score 2 · Answer 1 · edited May 04 '11 at 12:52

Edit your main.css file to

#header h1 {
    color: #000000;  // <-- your new title color
    font-family: 'News Cycle',arial,serif;
    font-size: 6em;
    font-weight: bold;
    letter-spacing: 2px;
    padding-bottom: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
}

You have all your links under the selector:

#nav ul li a, a:link, a:visited {
color: blue;
font-family: 'Smythe',serif;
font-size: 26px;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
text-decoration: none;
text-shadow: 2px 2px 2px #AAAAAA;
text-transform: none;
word-spacing: 0;
}

You could also separate the #nav ul li a part from the a:link, a:visited and assign a color just to the nav links, instead of all links.

+1 for naming his CSS file. You could have had bonus points for telling them it was on line 14 too :p — My Head Hurts, May 04 '11 at 12:17

score 1 · Answer 2 · answered May 04 '11 at 12:15

Your CSS in both cases use the a:link and a:visited

#nav ul li a, a:link, a:visited {
    color: white;
    font-family: 'Smythe',serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: 2px 2px 2px #AAAAAA;
    text-transform: none;
    word-spacing: 0;
}

#header h1 a, a:link, a:visited {
    color: #000000;
    text-decoration: none;
}

You can separate them with

#nav ul li a, #nav ul li a:link, #nav ul li a:visited { // nav link style ... }

and

#header h1 a, #header h1 a:link, #header h1 a:visited { // header link style... }

score 0 · Answer 3 · answered May 04 '11 at 12:14

the reason is that you give color in <a> tag

#nav ul li a, a:link, a:visited {
    color: white;
    font-family: 'Smythe',serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: 2px 2px 2px #AAAAAA;
    text-transform: none;
    word-spacing: 0;
}

for overwrite this above css write

#header a h1{
color: yellow;
}

Link Font Color Problem

3 Answers3