CSS and a:link

Hello everyone,

I'm confused about a:link in CSS. These are two examples I found...

a { color: #00f; }
a:visited { color: #f0f; }
a:hover { color: #0f0; }
a:active { color: #f00; }

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

When do you use 'a' on its own instead of 'a-link' for the unvisited
link? I'm asking because 'a:link' doesn't work in part of my site, where
'a' does.

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

As I understand it, your browser will normally have defaults for the
pseudoclasses (eg :visited) and these override the colours you set on "a"
because they are more specific. However, if you set (eg) "a:visited"
yourself, that will override the browser default settings. I've found you
can set some things (which the browsers don't meddle with) on "a" but not
others (eg colour).

--
####################
## PH, London
####################
"John Kane" <please.see (AT) signature (DOT) gov> wrote

Hello everyone,

I'm confused about a:link in CSS. These are two examples I found...

a { color: #00f; }
a:visited { color: #f0f; }
a:hover { color: #0f0; }
a:active { color: #f00; }

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

When do you use 'a' on its own instead of 'a-link' for the unvisited
link? I'm asking because 'a:link' doesn't work in part of my site, where
'a' does.

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

Thank you for your reply. In one part of my page I'm using 'a:link' to
set the 'unvisited' colour and it works, but in another part it doesn't
work, yet does with just 'a'. Still confused

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

In article <co7v0k$8rg$1 (AT) titan (DOT) btinternet.com>, foof8501
@herlihy.eu.veil.com says...

As I understand it, your browser will normally have defaults for the
pseudoclasses (eg :visited) and these override the colours you set on "a"
because they are more specific. However, if you set (eg) "a:visited"
yourself, that will override the browser default settings. I've found you
can set some things (which the browsers don't meddle with) on "a" but not
others (eg colour).

URL?

--
####################
## PH, London
####################
"John Kane" <please.see (AT) signature (DOT) gov> wrote

Thank you for your reply. In one part of my page I'm using 'a:link' to
set the 'unvisited' colour and it works, but in another part it doesn't
work, yet does with just 'a'. Still confused

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

In article <co7v0k$8rg$1 (AT) titan (DOT) btinternet.com>, foof8501
@herlihy.eu.veil.com says...
As I understand it, your browser will normally have defaults for the
pseudoclasses (eg :visited) and these override the colours you set on "a"
because they are more specific. However, if you set (eg) "a:visited"
yourself, that will override the browser default settings. I've found
you
can set some things (which the browsers don't meddle with) on "a" but not
others (eg colour).

Its the links on the right in the main content...

http://home.clara.net/johnkane/links.html

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

In article <co9ke9$7dj$1 (AT) titan (DOT) btinternet.com>, foof8501
@herlihy.eu.veil.com says...

URL?

Loaded your (pleasing) design into DW. I see only three link-specific
rules:

#linksTable A {
FONT-WEIGHT: bold; COLOR: #66629f; TEXT-DECORATION: none
}
/*...*/
#linksCell A:link {
COLOR: #66629f
}
#linksCell A:hover {
COLOR: #ffffff
}

Of these, only the COLOR one will vary between the states of the link. The
(unadorned) A rule will be overridden by the A:link and A:anything-else
rules as they are more specific. When I removed the COLOR rule from the
plain A link, nothing seemed to change.

Otherwise, as you've coded this, you have a nice blue link, which becomes
white when you hover, and which picks up your browser's default colour for
:visited links (in my case, purple). The link remains white when :active in
both IE and Firefox.

Nice site (particularly like the layout and colours). I can't see anything
wrong with it!

--
####################
## PH, London
####################
"John Kane" <please.see (AT) signature (DOT) gov> wrote

Its the links on the right in the main content...

http://home.clara.net/johnkane/links.html

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

In article <co9ke9$7dj$1 (AT) titan (DOT) btinternet.com>, foof8501
@herlihy.eu.veil.com says...
URL?

Thank you for your help Philip, and also your positive comments!

I've got rid of this...

#linksTable A {
FONT-WEIGHT: bold; COLOR: #66629f; TEXT-DECORATION: none
}

....and put it here...

#linksCell a:link, a:visited{
color: #66629F;
font-weight: bold;
text-decoration: none;
}

What I was missing was the a:visited! No wonder the a:link didn't
maintain the colour

--
Regards, John
news (AT) johnkane (DOT) clara.co.uk

In article <coa87f$gll$1 (AT) sparta (DOT) btinternet.com>, foof8501
@herlihy.eu.veil.com says...

Loaded your (pleasing) design into DW. I see only three link-specific
rules:

#linksTable A {
FONT-WEIGHT: bold; COLOR: #66629f; TEXT-DECORATION: none
}
/*...*/
#linksCell A:link {
COLOR: #66629f
}
#linksCell A:hover {
COLOR: #ffffff
}

Of these, only the COLOR one will vary between the states of the link. The
(unadorned) A rule will be overridden by the A:link and A:anything-else
rules as they are more specific. When I removed the COLOR rule from the
plain A link, nothing seemed to change.

Otherwise, as you've coded this, you have a nice blue link, which becomes
white when you hover, and which picks up your browser's default colour for
:visited links (in my case, purple). The link remains white when :active in
both IE and Firefox.

Nice site (particularly like the layout and colours). I can't see anything
wrong with it!

.oO(John Kane)

When do you use 'a' on its own instead of 'a-link' for the unvisited
link?

An a-element is not necessarily a link, it could also be a named anchor.
The pseudo-classes :link and :visited apply only to links, while the 'a'
applies to all anchors. It can also be used to set some generic styles
for all links regardless of their state. Instead of

a:link {
text-decoration: none;
color: ...
}
a:visited {
text-decoration: none;
color: ...
}
....

you can write

a {text-decoration: none}
a:link {color: ...}
a:visited {color: ...}
....

Using cascading and inheritance keeps the CSS smaller and easier to
maintain.

Micha

Elegantly put. I've managed to condense my CSS considerably by
generalising, and then specifying exceptions.

Nevertheless, as someone who has programmed in many languages over 20-odd
years of work in IT, I have to say that I think CSS is very crude. No
"variables" (you can't usually say "make this div the same colour as the
borders around that image" and there's no concept of "functions". You can,
however, divide your CSS into partitioned files (one file for a navigation
panel, and another to describe handling of tables, for example). I find CSS
difficult enough as it is, but when you have to start remembering all the
evil glitches in browsers and work around one without colliding with
another, it becomes a nightmare.

There's a principle seen in the evolution of all languages (not just
computer ones) that the "names" of familiar concepts become briefer as they
become more familiar, so nicknames, abbreviations (eg "telly") and acronyms
are developed. In IT, programmers use ever higher-level languages as time
goes on, reusing code and working with classes and coherent components
rather than instructions - think how you can simply drag a calendar control
onto a page in ASP.net. Where's all that in CSS? CSS as it stands still
calls for a high level of skill, and a memory for considerable anecdotal
detail. That spells its doom, in my view. Something much less complex must
eventually be developed to replace it, and it can't come too soon for me.
The skill should be concentrated on thinking out the design, rather than in
tiptoeing round the inadequacies of Netscape 4, or even IE 6.

Still, I must say I haven't yet produced anything as pleasing as John Kane's
site (even if I did spot the missing pseudoclass)...

</rant>

--
####################
## PH, London
####################
"Michael Fesser" <netizen (AT) gmx (DOT) net> wrote

.oO(John Kane)

When do you use 'a' on its own instead of 'a-link' for the unvisited
link?

An a-element is not necessarily a link, it could also be a named anchor.
The pseudo-classes :link and :visited apply only to links, while the 'a'
applies to all anchors. It can also be used to set some generic styles
for all links regardless of their state. Instead of

a:link {
text-decoration: none;
color: ...
}
a:visited {
text-decoration: none;
color: ...
}
...

you can write

a {text-decoration: none}
a:link {color: ...}
a:visited {color: ...}
...

Using cascading and inheritance keeps the CSS smaller and easier to
maintain.

Micha

.oO(Philip Herlihy)

Nevertheless, as someone who has programmed in many languages over 20-odd
years of work in IT, I have to say that I think CSS is very crude. No
"variables" (you can't usually say "make this div the same colour as the
borders around that image"

Lack of variable support is one thing that bothers me too, but nothing
prevents you from using a server-side script for generating the CSS. As
long as the content is delivered as text/css it doesn't matter how it's
generated.

and there's no concept of "functions". You can,
however, divide your CSS into partitioned files (one file for a navigation
panel, and another to describe handling of tables, for example).

While splitting sometimes makes sense, it should not be overdone. Every
included file (be it a link-element or an @import rule) has to be
requested from the server, which increases the connection overhead. But
as said above, you can use server-side scripting to split your CSS into
"modules", which are then bundled together before delivering.

I find CSS
difficult enough as it is, but when you have to start remembering all the
evil glitches in browsers and work around one without colliding with
another, it becomes a nightmare.

Yep, that's the real problem. It's not CSS (which is not that hard to
learn), it's the buggy and incomplete implementations, especially in IE.

Micha