469,366 Members | 2,243 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,366 developers. It's quick & easy.

Links colors in xhtml.

Hello all,

I know that in html to set colors of visited and activ links one need
to use line in the following format:

<BODY text="#FF0000" link="#0000FF" alink="#FFFF00" vlink="#00FF00">

However, I would like to use xhtml with css. In css-file I have the
next line:

body {background-color: black; color: blue;}

which define color of usual text and background. Do you know how one
need to modify this line to specify colors of visited and active links?
Another question is whether on can change not only colors of text in
link, but also background of link, i.e. background behind one word or
sentence which corespond to link?

Thank you.

Jul 23 '05 #1
19 10691
in comp.infosystems.www.authoring.html, op*********@yahoo.com wrote:
Hello all,

I know that in html to set colors of visited and activ links one need
to use line in the following format:

<BODY text="#FF0000" link="#0000FF" alink="#FFFF00" vlink="#00FF00">
Yes, in transitional
However, I would like to use xhtml with css.
Why xhtml? As you don't know what application/xhtml+xml means, use html4
strict instead. (if you know what it means, then you might choose not to
use it, buts lets not do that discussion again.)
In css-file I have the
next line:

body {background-color: black; color: blue;}

which define color of usual text and background. Do you know how one
need to modify this line to specify colors of visited and active links?
Well, you can add
a:link {color:#00f;}
a:visited {color:#0c0;}
a:active {color:#ff0;}
a:link, a:active, a:visited, body {background:black}
all in same line, but just as well you can have new lines...

Use background shorthand to set background properties always when you
set colors, if you are not planning to use all individual attributes, as
that way you avoid conflicts with userstyles.
Another question is whether on can change not only colors of text in
link, but also background of link, i.e. background behind one word or
sentence which corespond to link?


Sure. Just look for your CSS primer. Oh, you didn't already? Then you
presumably looked for FAQ, oh I guess you didn't. Maybe do that?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #2
<op*********@yahoo.com> wrote:
I know that in html to set colors of visited and activ links one need
to use line in the following format:

<BODY text="#FF0000" link="#0000FF" alink="#FFFF00" vlink="#00FF00">
If you specify one color, then you should specify them all. In the above
example, your text and link colors will show against the browser's default
background, which may not provide sufficient contrast. You should include
the BGCOLOR attribute too.
However, I would like to use xhtml with css.
Why XHTML? Why not HTML with CSS?

See also http://www.spartanicus.utvinternet.ie/no-xhtml.htm
In css-file I have the next line:

body {background-color: black; color: blue;}

which define color of usual text and background. Do you know how one
need to modify this line to specify colors of visited and active links?
a:link {background: black; color: white;}
a:visited {background: black; color: silver;}
a:active {background: black; color: red;}

See also http://www.w3.org/TR/CSS21/selector....pseudo-classes

I used background rather than background-color because using the background
shortcut like this also sets the background-image property to none. It
helps avoid the unlikely situation where the user's default background
image is used, rather than the document's background color.

Also, you might want to check out a good CSS tutorial, such as
http://westciv.com/style_master/academy/css_tutorial/
Another question is whether on can change not only colors of text in
link, but also background of link, i.e. background behind one word or
sentence which corespond to link?


Sure. You can use the link pseudo-class selectors to set whatever
properties you want.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"The handwriting on the wall may mean you need a notepad by the phone."
Jul 23 '05 #3
op*********@yahoo.com wrote:
I know that in html to set colors of visited and activ links one need
to use line in the following format:

<BODY text="#FF0000" link="#0000FF" alink="#FFFF00" vlink="#00FF00">
Yep that's the 90s way of doing it.
However, I would like to use xhtml with css.
Why not HTML with CSS? Any particular reason to use XHTML, or just
personal fancy?
In css-file I have the next line:

body {background-color: black; color: blue;}

which define color of usual text and background. Do you know how one
need to modify this line to specify colors of visited and active links?
You don't. You set the properties of the links for the links
themselves, not for the body.
a:link {color: #0000FF; background-color: #FFFFFF;}
a:visited {color: #00FF0; background-color: #FFFFFF;}
a:hover {color: #FFFF00; background-color: #FFFFFF;}
a:active {color: #FFFF00; background-color: #FFFFFF;}
Another question is whether on can change not only colors of text in
link, but also background of link, i.e. background behind one word or
sentence which corespond to link?


Same as for any other element.
See the CSS spec: http://www.w3.org/tr/css21/

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 23 '05 #4
Els
Lauri Raittila wrote:
a:link {color:#00f;}
a:visited {color:#0c0;}
a:active {color:#ff0;}
a:link, a:active, a:visited, body {background:black}


How about a:focus for the mouse-less?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Guns N' Roses - Don't Cry (original)
Jul 23 '05 #5
Thank you for your answers.

Concerning xhtml, to be honest, I have no intelligible argumentation
why I have decided to use it. I am just beginer and I just thought that
it is more "moder" :).

I tried your suggestions and understood that "active link" is not what
I meant under it. When I spoke about "active" link I meant a link on
which cursor of mous is put. Can I specify in terms of css a color and
background for a link in this "state"?

Jul 23 '05 #6
I just read answer of Steve Pugh and found that he already answered on
my last question. One need to use "hover".

Jul 23 '05 #7
op*********@yahoo.com wrote:
body {background-color: black; color: blue;}


I hope the above is just a sample for posting here. Blue text on a
black background is virtually unreadable.
--
-bts
-This space intentionally left blank.
Jul 23 '05 #8
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
a:link {color:#00f;}
a:visited {color:#0c0;}
a:active {color:#ff0;}
a:link, a:active, a:visited, body {background:black}


How about a:focus for the mouse-less?


Better not tell anything about it for newbies, as it don't make any
difference on any program anyway, of does it? And if it does, is that
effect useful? So, lets not define it for OP to forgot and in couple
years come here again and ask, why are my links strange color when... as
color sheme of site has changed to something more sencible, but new
browser implements a:focus

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #9
Els
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
a:link {color:#00f;}
a:visited {color:#0c0;}
a:active {color:#ff0;}
a:link, a:active, a:visited, body {background:black}


How about a:focus for the mouse-less?


Better not tell anything about it for newbies, as it don't make any
difference on any program anyway, of does it? And if it does, is that
effect useful? So, lets not define it for OP to forgot and in couple
years come here again and ask, why are my links strange color when... as
color sheme of site has changed to something more sencible, but new
browser implements a:focus


a) a:focus gives strange colours?
b) if this is no info for newbies, what is??
c) I really expected more of you - you are so darn precise with your
advise, that I can't believe you honestly want to skip the a:focus
styles because someone is a 'newbie'. What happened to your campaign
for accessibility? I believe a:focus is the most forgotten but at the
same time easiest thing to implement that helps people who only
can/may use a keyboard.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Guns N' Roses - Coma
Jul 23 '05 #10
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
How about a:focus for the mouse-less?
a) a:focus gives strange colours?
Well, if you style it assuming black backgound, and then it will be used
on white.
b) if this is no info for newbies, what is??
Something that has relevance now, not in few years.
c) [..] you honestly want to skip the a:focus
styles because someone is a 'newbie'. What happened to your campaign
for accessibility? I believe a:focus is the most forgotten but at the
same time easiest thing to implement that helps people who only
can/may use a keyboard.


A:focus has big change of hamper keyboard navigation if done by random.
And it will be used in random, as AFAIK it has no effect on any browser,
and OTOH, all browser have focus indicator for links. Using some other
indicator is not likely to make it any better (remember that Opera for
example does not use dotted lines, but selection color for focused
links.)

You are confucing it to :focus on form fields, aren't you?

You can test if a:focus works in your browser using this:
http://www.student.oulu.fi/~laurirai...focus_bug.html

(actually it almost works in Opera...)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #11
Els
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote: How about a:focus for the mouse-less?
a) a:focus gives strange colours?
Well, if you style it assuming black backgound, and then it will be used
on white.


Same goes for any coloured text with an assumed background.
A newbie should just learn it the right way: set a background color
when you use a foreground color.
And I always style a:focus together with a:hover and a:active, and how
can I forget that I styled them years ago? I may have forgotten that I
gave the site a black background too? I don't understand your point in
this.
b) if this is no info for newbies, what is??


Something that has relevance now, not in few years.


You are saying that
a) newbies don't have to do what is good now, but only what works in a
few years,
and
b) a:focus isn't a relevant style selector anymore in a few years?
c) [..] you honestly want to skip the a:focus
styles because someone is a 'newbie'. What happened to your campaign
for accessibility? I believe a:focus is the most forgotten but at the
same time easiest thing to implement that helps people who only
can/may use a keyboard.


A:focus has big change of hamper keyboard navigation if done by random.
And it will be used in random, as AFAIK it has no effect on any browser,


Huh?
and OTOH, all browser have focus indicator for links.
Go ahead and try to spot the focused link on a grey background.
Using some other
indicator is not likely to make it any better (remember that Opera for
example does not use dotted lines, but selection color for focused
links.)
So? I didn't know that, but apparently Opera is showing you that it's
better to have a different link style for focused links.
You are confucing it to :focus on form fields, aren't you?
Not at all. I would not use :focus on form fields actually.
You can test if a:focus works in your browser using this:
http://www.student.oulu.fi/~laurirai...focus_bug.html
That example doesn't work in IE5, but does work in Firefox.
You have not specified the a:link and a:visited styles in your example
though, which might be the cause (haven't checked!) of it not working
in IE5.
(actually it almost works in Opera...)


Check my site if you like, start pressing your tab button, and see
what the links look like. All the links have the same style while on
focus as when hovered. Also it works in all my browsers, including
IE5.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Guns N' Roses - Coma
Jul 23 '05 #12
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:

in comp.infosystems.www.authoring.html, Els wrote:
> How about a:focus for the mouse-less?

a) a:focus gives strange colours?


Well, if you style it assuming black backgound, and then it will be used
on white.


Same goes for any coloured text with an assumed background.


Yes, but when you think why you have purple on black on your new pastel
color sheme in future browser, that might be problem. But it seems that I
was mistaken.

As I don't usually navigate when using FF, I haven't noticed this, and I
don't remember seen anything about use of it in usenet or www...
And I always style a:focus together with a:hover and a:active, and how
can I forget that I styled them years ago?
And anyway, why are you using same color for active and focus/hover? It
I believe a:focus is the most forgotten but at the
same time easiest thing to implement that helps people who only
can/may use a keyboard.

It is not forgotten. It is not known at all.
And it will be used in random, as AFAIK it has no effect on any browser,


Huh?


Seems to be that I was badly mistaken. So most, if not all in my last
post was incorrect.
Using some other
indicator is not likely to make it any better (remember that Opera for
example does not use dotted lines, but selection color for focused
links.)


So? I didn't know that, but apparently Opera is showing you that it's
better to have a different link style for focused links.


Yes, but it is better to have consistant style, not something random.
(it seems random from random user)
You can test if a:focus works in your browser using this:
http://www.student.oulu.fi/~laurirai...focus_bug.html


That example doesn't work in IE5,


Nor any other IE that I have tried, and time I created it it didn't work
on Gecko, IIRC.
You have not specified the a:link and a:visited styles in your example
though, which might be the cause (haven't checked!) of it not working
in IE5.
That this example page don't work is propably main reason that I had
mistaken idea about support of a:focus. I think it is only one I knew
having a:focus...
Check my site if you like, start pressing your tab button, and see
what the links look like. All the links have the same style while on
focus as when hovered. Also it works in all my browsers, including
IE5.


Has no effect on opera, AFAICS. And your menu doesn't have those info
boxes when focus, on any browser
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #13
Els
Lauri Raittila wrote:
>> How about a:focus for the mouse-less?

a) a:focus gives strange colours?

Well, if you style it assuming black backgound, and then it will be used
on white.
Same goes for any coloured text with an assumed background.


Yes, but when you think why you have purple on black on your new pastel
color sheme in future browser, that might be problem. But it seems that I
was mistaken.

As I don't usually navigate when using FF, I haven't noticed this, and I
don't remember seen anything about use of it in usenet or www...


That's because not many people think of accessibility yet I think.
The W3C does give the information -
http://www.w3.org/TR/CSS21/selector.html#x38
- but doesn't actually link it to accessibility, so I guess many
people just don't realise the effect it can have for disabled users
(and anyone else preferring to use the keyboard).
And I always style a:focus together with a:hover and a:active, and how
can I forget that I styled them years ago?


And anyway, why are you using same color for active and focus/hover? It


For focus and hover I use the same colour because it's imo the same
state, only reached in different ways. The reason I give active the
same style, is really laziness and the lack of seeing a reason. I did
have a separate :active style once, making the text red on :active,
but now that my links are a shade of red on hover/focus, I couldn't be
bothered to find yet another shade for active links. It's only one
split second anyway that the :active state is there.

But you're right, I should add a different :active style, especially
for those earlier mentioned keyboard users, who don't otherwise know
whether the link was 'clicked' or not. I'll change that style sometime
today.
I believe a:focus is the most forgotten but at the
same time easiest thing to implement that helps people who only
can/may use a keyboard.
It is not forgotten. It is not known at all.


A compromise then: it's overlooked :-)
And it will be used in random, as AFAIK it has no effect on any browser,

Huh?

Seems to be that I was badly mistaken. So most, if not all in my last
post was incorrect.


Pfew, that saves me a long thread today ;-)
Using some other
indicator is not likely to make it any better (remember that Opera for
example does not use dotted lines, but selection color for focused
links.)

So? I didn't know that, but apparently Opera is showing you that it's
better to have a different link style for focused links.

Yes, but it is better to have consistant style, not something random.
(it seems random from random user)


I don't understand what you mean with 'it seems random'. Like some
websites have it and some don't?
You can test if a:focus works in your browser using this:
http://www.student.oulu.fi/~laurirai...focus_bug.html

That example doesn't work in IE5,

Nor any other IE that I have tried, and time I created it it didn't work
on Gecko, IIRC.


I didn't check on IE6, but indeed, it's quite possible it doesn't work
in any IE. The same is said about coloured borders on linked images,
but that can be made to work also; link styles just have some weird
conditions in which they work or don't work.
You have not specified the a:link and a:visited styles in your example
though, which might be the cause (haven't checked!) of it not working
in IE5.


That this example page don't work is propably main reason that I had
mistaken idea about support of a:focus. I think it is only one I knew
having a:focus...


:-)
Check my site if you like, start pressing your tab button, and see
what the links look like. All the links have the same style while on
focus as when hovered. Also it works in all my browsers, including
IE5.


Has no effect on opera, AFAICS.


Oops! Okay, all my browsers but Opera ;-)
Opera lets its own style for focused links prevail.
And your menu doesn't have those info boxes when focus, on any browser.


Does now (not in Opera), thanks for pointing it out, I had forgotten
the :focus style on the span.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 23 '05 #14
in comp.infosystems.www.authoring.html, Els wrote:
The reason I give active the
same style, is really laziness and the lack of seeing a reason.


If that is the case, I suggest you not set it at all. When you change
defaults without reason, you hurt someones
usability/accessibility accidentally easily. Someone might have use for
this...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #15
Els
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
The reason I give active the
same style, is really laziness and the lack of seeing a reason.


If that is the case, I suggest you not set it at all. When you change
defaults without reason, you hurt someones
usability/accessibility accidentally easily. Someone might have use for
this...


True, but the default is red iirc, and my links are red on hover, so
it's already hurting accessibility if I don't set it. I think that if
I set any link colour, I should set them all.

Also to not forget the influence of it's styling on the whole. Like if
I have a blue background, it's silly to leave links blue, even though
blue is the most expected link colour ;-)

Anyway, I'm just fiddling (locally) with the link colours, but it
seems that the :active style rules only apply when clicking with a
mouse, and not when using Tab and Enter keys. I'll investigate that
further though, but not today - work is calling.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 23 '05 #16
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
The reason I give active the
same style, is really laziness and the lack of seeing a reason.
If that is the case, I suggest you not set it at all. When you change
defaults without reason, you hurt someones
usability/accessibility accidentally easily. Someone might have use for
this...


True, but the default is red iirc, and my links are red on hover, so
it's already hurting accessibility if I don't set it.


Which differs from situation when you change it same time as other how?
Also to not forget the influence of it's styling on the whole. Like if
I have a blue background, it's silly to leave links blue, even though
blue is the most expected link colour ;-)


Yes, but then you sure do have good reason to change link color. (even if
changing background color would be better in accessibility view point...)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #17
Els
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
The reason I give active the
same style, is really laziness and the lack of seeing a reason.

If that is the case, I suggest you not set it at all. When you change
defaults without reason, you hurt someones
usability/accessibility accidentally easily. Someone might have use for
this...


True, but the default is red iirc, and my links are red on hover, so
it's already hurting accessibility if I don't set it.


Which differs from situation when you change it same time as other how?


It doesn't. default red or set red is the same thing. I need to change
the colour for :active links, so that they don't look the same as on
hover.
Also to not forget the influence of it's styling on the whole. Like if
I have a blue background, it's silly to leave links blue, even though
blue is the most expected link colour ;-)


Yes, but then you sure do have good reason to change link color. (even if
changing background color would be better in accessibility view point...)


Very true, just used it as an example :-)
(on red background blue isn't very good either ;-) )

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Lois Lane - It's The First Time (Extended Version)
Jul 23 '05 #18
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:

But you're right, I should add a different :active style, especially
for those earlier mentioned keyboard users, who don't otherwise know
whether the link was 'clicked' or not. I'll change that style sometime
today.


"Mouse" users might find it useful as well. Think all touch screens
touchpads and stuff, without buttons that give clear feedback.
Seems to be that I was badly mistaken. So most, if not all in my last
post was incorrect.


Pfew, that saves me a long thread today ;-)


Isn't it nice that people can admit their mistakes? Strange thing is that
people that make mistakes often are more likely to keep their position...
that's even tru for me, on subjects I make lots of mistakes, I don't want
to admit it...
Yes, but it is better to have consistant style, not something random.
(it seems random from random user)


I don't understand what you mean with 'it seems random'. Like some
websites have it and some don't?


Well, if you use green, I use red, he uses dotted bottom border and w3
3px red outline, it will make some time to adjust. As this is higly
overlooked feature, people are not used to look for it, and thus it migh
even prevent user noticing the normal focus indicator.
And your menu doesn't have those info boxes when focus, on any browser.


Does now (not in Opera), thanks for pointing it out, I had forgotten
the :focus style on the span.


Your site seems to be nice addition to Opera bug I have reported, as this
far it has been quite theoretical... I'll send the address there...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 23 '05 #19
Els
Lauri Raittila wrote:
in comp.infosystems.www.authoring.html, Els wrote:
Lauri Raittila wrote:

But you're right, I should add a different :active style, especially
for those earlier mentioned keyboard users, who don't otherwise know
whether the link was 'clicked' or not. I'll change that style sometime
today.
"Mouse" users might find it useful as well. Think all touch screens
touchpads and stuff, without buttons that give clear feedback.


I have one touch screen thingy here, (Windows CE but too old to
support any CSS at all), but the screen reacts to the stylus exactly
as it would do with mouse clicks. Buttons are visibly 'pressed'.
Don't know about 'touchpads and stuff' though :-)
Seems to be that I was badly mistaken. So most, if not all in my last
post was incorrect.


Pfew, that saves me a long thread today ;-)


Isn't it nice that people can admit their mistakes? Strange thing is that
people that make mistakes often are more likely to keep their position...
that's even tru for me, on subjects I make lots of mistakes, I don't want
to admit it...


Human nature :-)
Yes, but it is better to have consistant style, not something random.
(it seems random from random user)


I don't understand what you mean with 'it seems random'. Like some
websites have it and some don't?


Well, if you use green, I use red, he uses dotted bottom border and w3
3px red outline, it will make some time to adjust.


Ah okay, understood. Not much we can do about it though, I think the
web would become boring if we all stuck to the same styles, even if
only for links.
As this is higly
overlooked feature, people are not used to look for it, and thus it migh
even prevent user noticing the normal focus indicator.


Solution: tell the world about the :focus styles !! <bg>
And your menu doesn't have those info boxes when focus, on any browser.


Does now (not in Opera), thanks for pointing it out, I had forgotten
the :focus style on the span.


Your site seems to be nice addition to Opera bug I have reported, as this
far it has been quite theoretical... I'll send the address there...


Okay, I won't try and find a work-around then ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Marcus Miller - Maputo
Jul 23 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Chris | last post: by
3 posts views Thread by Bart Lateur | last post: by
9 posts views Thread by Adam | last post: by
7 posts views Thread by Cate Archer | last post: by
15 posts views Thread by Mason C | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.