Styling links

HTML & CSS
1

Hey guys,

I’m having problems getting styling to apply to my links, I’m wondering if you can help me work out what I’m doing wrong.
Currently I’m specifying it as such:

	a.link{
			color:#2755A1;
			font-weight:normal;
			text-decoration:underline;
		}
		a.visited{
			color:#red;
			font-weight:normal;
			text-decoration:underline;
		}

I’m pretty new to CSS so there’s all manner of stupid mistakes I might be making :wink: What are the key things I should be checking to work out how to fix this?

2

:lol: Don’t worry, we are here to help. :slight_smile:

Here you are using “pseudo classes” rather than actual classes, so you need a colon rather than a dot—a:link and a:visited.

When using a “hex” color value, like here—#2755A1—you need the # at the front, but when using a named color, you don’t want it, so just use “red”, rather that “#red”:

a:visited{
  color: [COLOR="#FF0000"]red[/COLOR];
  font-weight:normal;
  text-decoration:underline;
}

I would write those styles like this:

a {
  color:#2755A1;
[COLOR="#0000CD"]  font-weight:normal;
  text-decoration:underline;[/COLOR]
}

a:visited{
  color:red;
}

The styles in blue above are probably redundant and can be deleted, as they are the defaults anyway. Only use then if you are overriding bold and/or no-underline declared earlier on (which is unlikely).

You don’t need to repeat styles on the :visited pseudo class, as they will be transferred anyway. And the :link on the <a> is not normally needed.

3

Thanks for the dot/colon tip and hash tag pick up! I originally tried styling using just ‘a’ but it wasn’t working either, hence my sloppy experimenting that I posted up above. Luckily though, when I went back to apply your tips, I noticed that both selectors were sitting above the closing bracket of another selector’s declaration, ie.

.header p{
			color:#939598;
			text-align: right;

		a{
			color:#2755A1;
		}
		}

Suffice to say this mistake has been rectified, the page is now styled correctly and I’m a little red faced!

4

It doesn’t look so bad in CSS:

.face {color: red;}

:slight_smile:

5

You need not to apply # before the color name.
In case you are using hex codes for color then you have to apply #.
So, instead of #red, simply write red.