Css class isn't working on links

I have put a CSS rule for my links, but I do not want all of my links to follow this rule so I created a “class” rule for these links and It did not seem to work. Just wondering if this is the right thing to do or what else I should do.


A:link  {
  font-size:16px;
  color:#404040; 
  text-decoration:none;
}

A:visited  {
  font-size:16px;
  color:#404040; 
  text-decoration:none;
}

A:active  {
  font-size:16px;
  color:#404040;
  text-decoration:none;
  background-color:#888888;
}

A:hover  {
  font-size:16px;
  color:#404040;
  text-decoration:underline;
}


a.underlined  {
  text-decoration:underlined;
}

<a href="#" class="underlined">#</a>

A typo?


a.underlined  {
  text-decoration:underline[color=red]d[/color];
}

You’ll need to change the uppercase “A” selectors to lowercase, too. Windoze doesn’t care, but linux computers do. :slight_smile:


[color=red]A[/color]:link {}

Haha thanks for pointing that out I guess I was rushing it. And thanks for the advice to I’ll change that.

Happens to all of us :slight_smile: My bane is {font-style:italic[color=red]s[/color]} :rolleyes:

My banana peel is the {margin; 20px 0 0 20px;} :wink:

To get the show 100%, you need to follow the rule “LoVeHAte”, just in this order:

a:[B]l[/B]ink    {...}
a:[B]v[/B]isited {...}
a:[B]h[/B]over   {...}
a:[B]a[/B]ctive  {...}

Otherwise the hover state will overrule the active-state.
And better is to follow: “LoVe, (s)He FAked” , with also the focus state mentioned: (*)

a:[B]l[/B]ink    {...}
a:[B]v[/B]isited {...}
a:[B]h[/B]over,
a:[B]f[/B]ocus   {...}
a:[B]a[/B]ctive  {...}

This is for accessibility ([U]see guideline[/U]): now no-mouse-using vistitors, who use the Tab-key to find the links in the page, can also see where they are by the “hover-change” (without mouse you cannot see a hover!).

In your case, it could be in a short notation:

a { /* in general, so also for a:link */
	font-size: 16px;
	color: #404040;
	text-decoration: none;
	}
a:visited {
	color: green;
	}
a:hover,
a:focus {
	color: red;
	text-decoration: underline; /* exception */
	}
a:active { /* at mousedown */
	text-decoration: none; /* overruling the hover/focus */
	background-color: yellow;
	}

a.underline {
	text-decoration: underline;
	}

Attention: there are browser differences in the interpretation of the visited/active/focus state!

  • IE7 after coming back: the green text + yellow background is showed, without underline (= visited + active state).
  • FF, IE10 and Opera after coming back: the red text + normal background is showed, with underline (= hover/focus state).
  • Safari-Win: the same, but as soon as you move the mouse, the green text + normal background is showed, without underline (= visited).
  • Chrome after coming back: the green text + normal background is showed, without underline (= visited).
  • All browsers: after a click somewhere else in the page (losing focus/active state), the visited state is showed (= green text + normal background + no underline in the first line).

Not too much!
But I guess that most visitors know which links they have clicked before, and don’t have to be remembered by a special “visited” state.

  • So to avoid confusion, I usually omit the visited and active state: just the a {…} and the a:hover, a:focus {…} will be enough.

Some other remarks about accessibility:

  • The [U]guideline 1.4.1 says[/U] (in other words): “A link must be clearly distinguishable from normal text, not in different color alone”. - Links without underline can be invisible for people with colorblindness or diminished color contrast power!
  • Note: this forum does not underline links, and they are difficult to see by their color difference (sometimes I don’t notify a link…). Brrr! :shifty: - ([U]See this topic[/U]!)
    (exception: in my posts I underline the links by hand)

  • For Tab-visitors the outline dots are very important. They cannot be removed just for the sake of the design beauty.
    See this site: [U]www.outlinenone.com[/U]

(*) The mnemonic is an invention of Goeroeboeroe, last post in [U]this forum topic[/U].