Color of hyperlink

Bob

Hello,

I have an <h1> banner that is white font on black background. I am using CSS
to style the banner in white on black.

I would like to hyperlink the words, but I want to force the hyperlink to
remain white in color rather than changing colors due to the hyperlink. Just
for the banner hyperlinks - not for the whole page with other hyperlinks.

Is there a way to force the banner hyperlink to remain white?

Thanks,

Bob

Jul 23 '05 #1

Subscribe Post Reply

13770

Mark Tranchant

Bob wrote:

Hello,

I have an <h1> banner that is white font on black background. I am using CSS
to style the banner in white on black.

I would like to hyperlink the words, but I want to force the hyperlink to
remain white in color rather than changing colors due to the hyperlink. Just
for the banner hyperlinks - not for the whole page with other hyperlinks.

Is there a way to force the banner hyperlink to remain white?

Followups set to ciwas.

h1 a { color: white; }

--
Mark.
http://tranchant.plus.com/

Jul 23 '05 #2

Els

Bob wrote:

Hello,

I have an <h1> banner that is white font on black
background. I am using CSS to style the banner in white on
black.

I would like to hyperlink the words, but I want to force
the hyperlink to remain white in color rather than changing
colors due to the hyperlink. Just for the banner hyperlinks
- not for the whole page with other hyperlinks.

Is there a way to force the banner hyperlink to remain
white?

Is the <h1> the only <h1> with hyperlinks in it on the page?
In that case:
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active{
color:white;
background-color:black;
}

If it isn't, wrap it in a div with a class.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Scene - Kans

Jul 23 '05 #3

Chris Morris

"Bob" <ergobob@sonic[no spam].net> writes:

I have an <h1> banner that is white font on black background. I am using CSS
to style the banner in white on black.

I would like to hyperlink the words, but I want to force the hyperlink to
remain white in color rather than changing colors due to the hyperlink. Just
for the banner hyperlinks - not for the whole page with other hyperlinks.

Is there a way to force the banner hyperlink to remain white?

Yes.

Before you do, consider two things:

1) How is the user supposed to know it's a link?
1a) How do they tell whether it's visited or unvisited?
2) What on earth is it linking to? If you're using <h1> properly - for
a page title - then what does it link to? If you're using <h1> just
to get big text, then don't - use CSS to style something else to
look right.

In a few contexts they may be unimportant. But generally it's quite
important. You probably have one where it is important - post a URL
with an example if you want that confirming.

For the how:
Use CSS. You'll need to look up 'descendant selectors' (or use
inline styles, but that's not a good idea except for testing) and the
'color' and 'background' properties.

--
Chris

Jul 23 '05 #4

Bob

"Chris Morris" <c.********@durham.ac.uk> wrote in message
news:87************@dinopsis.dur.ac.uk...

"Bob" <ergobob@sonic[no spam].net> writes:
I have an <h1> banner that is white font on black background. I am using CSS to style the banner in white on black.

I would like to hyperlink the words, but I want to force the hyperlink to remain white in color rather than changing colors due to the hyperlink. Just for the banner hyperlinks - not for the whole page with other hyperlinks.
Is there a way to force the banner hyperlink to remain white?

Yes.

Before you do, consider two things:

1) How is the user supposed to know it's a link?
1a) How do they tell whether it's visited or unvisited?
2) What on earth is it linking to? If you're using <h1> properly - for
a page title - then what does it link to? If you're using <h1> just
to get big text, then don't - use CSS to style something else to
look right.

In a few contexts they may be unimportant. But generally it's quite
important. You probably have one where it is important - post a URL
with an example if you want that confirming.

For the how:
Use CSS. You'll need to look up 'descendant selectors' (or use
inline styles, but that's not a good idea except for testing) and the
'color' and 'background' properties.

--
Chris

Hello Chris and Everyone,

The <h1> on each of my pages is not hyperlinked right now and describes the
major topics on the page. You can see a sample of this on my new test pages
at www.usernomics.com/testsite . It is the top black banner.

The reason for wanting to hyperlink these keywords, has to do with Search
Engine Optimization. The notion is that there is extra weight assigned by
search engines to words within the body that are hyperlinked. Since the <h1>
contains all of my keywords, I thought it would not hurt anything to give it
a shot. But I don't want to destroy to look and feel of the banner.

I do want to do this with CSS and my new CSS can be seen at
www.usernomics.com/testsite/main.css .

I am new to CSS so any help will be appreciated.

Thanks a lot,

Bob

Jul 23 '05 #5

Bob

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...

Bob wrote:
Hello,

I have an <h1> banner that is white font on black
background. I am using CSS to style the banner in white on
black.

I would like to hyperlink the words, but I want to force
the hyperlink to remain white in color rather than changing
colors due to the hyperlink. Just for the banner hyperlinks
- not for the whole page with other hyperlinks.

Is there a way to force the banner hyperlink to remain
white?

Is the <h1> the only <h1> with hyperlinks in it on the page?
In that case:
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active{
color:white;
background-color:black;
}

If it isn't, wrap it in a div with a class.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Scene - Kans

Hello Els,

Yes, the <h1> is the only <h1> on the page and it would now be hyperlinked -
www.usernomics.com/testsite .

I will try the CSS you suggested.

Thanks a lot,

Bob

Jul 23 '05 #6

Els

Bob wrote:

> I have an <h1> banner that is white font on black
> background. I am using CSS to style the banner in white
> on black.
>
> I would like to hyperlink the words, but I want to force
> the hyperlink to remain white in color rather than
> changing colors due to the hyperlink. Just for the
> banner hyperlinks - not for the whole page with other
> hyperlinks.
Is the <h1> the only <h1> with hyperlinks in it on the
page? In that case:
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active{
color:white;
background-color:black;
}

Yes, the <h1> is the only <h1> on the page and it would now
be hyperlinked - www.usernomics.com/testsite .

I see it's in a div too:
<div id="banner1"><h1>ERGONOMICS ~ HUMAN FACTORS ~ USER
INTERFACE DESIGN ~ USABILITY TESTING</h1></div>

(I wouldn't call that background black btw ;-) )

So if you add #banner1 before every h1 in that bit of css,
you'd be able to use more h1 hyperlinks on your pages without
styling them the same way as this one.
Like this:
#banner1 h1 a:link,
#banner1 h1 a:visited,
#banner1 h1 a:hover,
#banner1 h1 a:active{...}
I will try the CSS you suggested.

Thanks a lot,

You're welcome :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 23 '05 #7

Chris Morris

"Bob" <ergobob@sonic[no spam].net> writes:

"Chris Morris" <c.********@durham.ac.uk> wrote in message
2) What on earth is it linking to? If you're using <h1> properly - for
a page title - then what does it link to? If you're using <h1> just
to get big text, then don't - use CSS to style something else to
look right.
The <h1> on each of my pages is not hyperlinked right now and describes the
major topics on the page. You can see a sample of this on my new test pages
at www.usernomics.com/testsite . It is the top black banner.

Okay. Probably using the ~ as a separator isn't so advisable.
The reason for wanting to hyperlink these keywords, has to do with Search
Engine Optimization. The notion is that there is extra weight assigned by
search engines to words within the body that are hyperlinked. Since the <h1>
contains all of my keywords, I thought it would not hurt anything to give it
a shot. But I don't want to destroy to look and feel of the banner.
1) What would you link it to? Circular links are *really* bad for users.

2) Even if it did work, it'd only work until the search engines caught
on. At that point, you'd go straight to the bottom of the results
list, do not pass Go, do not collect 200 new visitors. Good
*honest* markup tends to be good for search engines.

If it's a page about the things in the <h1>, then it'll show up enough
on those keywords *anyway*, other factors being equal. Be honest in
your markup both for user-focus and to avoid search engines punishing you.

In short - don't do that.
I am new to CSS so any help will be appreciated.

Look through the Google Groups archives for
news:comp.infosystems.www.authoring.stylesheets for answers to lots of
common stylesheet questions and the occasional rare one.

Try things out, read the CSS documentation at
http://www.w3.org/TR/CSS2/, get a collection of browsers and test
things. Enjoy.

--
Chris

Jul 23 '05 #8

Bob

"Chris Morris" <c.********@durham.ac.uk> wrote in message
news:87************@dinopsis.dur.ac.uk...

"Bob" <ergobob@sonic[no spam].net> writes:
"Chris Morris" <c.********@durham.ac.uk> wrote in message
2) What on earth is it linking to? If you're using <h1> properly - for
a page title - then what does it link to? If you're using <h1> just
to get big text, then don't - use CSS to style something else to
look right.

The <h1> on each of my pages is not hyperlinked right now and describes the major topics on the page. You can see a sample of this on my new test pages at www.usernomics.com/testsite . It is the top black banner.

Okay. Probably using the ~ as a separator isn't so advisable.
The reason for wanting to hyperlink these keywords, has to do with Search Engine Optimization. The notion is that there is extra weight assigned by search engines to words within the body that are hyperlinked. Since the <h1> contains all of my keywords, I thought it would not hurt anything to give it a shot. But I don't want to destroy to look and feel of the banner.

1) What would you link it to? Circular links are *really* bad for users.

2) Even if it did work, it'd only work until the search engines caught
on. At that point, you'd go straight to the bottom of the results
list, do not pass Go, do not collect 200 new visitors. Good
*honest* markup tends to be good for search engines.

If it's a page about the things in the <h1>, then it'll show up enough
on those keywords *anyway*, other factors being equal. Be honest in
your markup both for user-focus and to avoid search engines punishing you.

In short - don't do that.
I am new to CSS so any help will be appreciated.

Look through the Google Groups archives for
news:comp.infosystems.www.authoring.stylesheets for answers to lots of
common stylesheet questions and the occasional rare one.

Try things out, read the CSS documentation at
http://www.w3.org/TR/CSS2/, get a collection of browsers and test
things. Enjoy.

--
Chris

Hello Chris,

Thanks for the good advise. I am not trying to be tricky. Actually, I did
get some feedback that some people expected those words to be hyperlinked.
Also, they can point to other pages or anchors on the same page where the
topic appears.

I did give the CSS a tryout and you can see how I linked them at
www.usernomics.com/testsite/test.html

I will remove the ~ seperators. Now I just have to decide if I really want
to do it?

Thanks Again,

Bob

Jul 23 '05 #9

Bob

"Chris Morris" <c.********@durham.ac.uk> wrote in message
news:87************@dinopsis.dur.ac.uk...

"Bob" <ergobob@sonic[no spam].net> writes:
I have an <h1> banner that is white font on black background. I am using CSS to style the banner in white on black.

I would like to hyperlink the words, but I want to force the hyperlink to remain white in color rather than changing colors due to the hyperlink. Just for the banner hyperlinks - not for the whole page with other hyperlinks.
Is there a way to force the banner hyperlink to remain white?

Yes.

Before you do, consider two things:

1) How is the user supposed to know it's a link?
1a) How do they tell whether it's visited or unvisited?
2) What on earth is it linking to? If you're using <h1> properly - for
a page title - then what does it link to? If you're using <h1> just
to get big text, then don't - use CSS to style something else to
look right.

In a few contexts they may be unimportant. But generally it's quite
important. You probably have one where it is important - post a URL
with an example if you want that confirming.

For the how:
Use CSS. You'll need to look up 'descendant selectors' (or use
inline styles, but that's not a good idea except for testing) and the
'color' and 'background' properties.

--
Chris

Hi Chris,

You can see several pages at www.usernomics.com/testsite

I was not terribly concerned about the user in this case but if you run the
cursor over the word you do get an underline and cursor change to see it is
hyperlinked. I don't think too many people would use it but some might. It
does provide an opportunity to add hyperlinked keywords though.

A completed example is at www.usernomics.com/testsite/test.html .

Thanks a lot,

Bob

Jul 23 '05 #10

Brian

Bob wrote:

The <h1> on each of my pages is not hyperlinked right now and
describes the major topics on the page.

The reason for wanting to hyperlink these keywords, has to do with
Search Engine Optimization. The notion is that there is extra weight
assigned by search engines to words within the body that are
hyperlinked. Since the <h1> contains all of my keywords, I thought it
would not hurt anything to give it a shot.

I'm not sure how turning all <h1> elements into <h1><a>etc contructs
will change search engine rankings. Some search engines (notably Goole)
check links from other sites to your pages. Is that what you have in mind?

On a general note, it's best not to write for search engines. Write for
people; use proper markup; make text rich sites; and get others to link
to you. The search engines will do their thing, and it should work out
reasonably well if you've done your job well.

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

Jul 23 '05 #11

Leif K-Brooks

Bob wrote:

www.usernomics.com/testsite

This is off-topic, but I don't find the justified text to be very
usable. It ends up looking like this with really large
spaces; my eyes won't follow sentences over that much space.

Jul 23 '05 #12

Neal

On Wed, 22 Sep 2004 16:25:52 -0400, Leif K-Brooks <eu*****@ecritters.biz>
wrote:

Bob wrote:
www.usernomics.com/testsite

This is off-topic, but I don't find the justified text to be very
usable. It ends up looking like this with really large
spaces; my eyes won't follow sentences over that much space.

Yes, justified text works when the words are small enough and the column
is wide enough, otherwise it's plain fugly.

Jul 23 '05 #13

Bob

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:tQ*********************@bgtnsc04-news.ops.worldnet.att.net...

Bob wrote:

The <h1> on each of my pages is not hyperlinked right now and
describes the major topics on the page.

The reason for wanting to hyperlink these keywords, has to do with
Search Engine Optimization. The notion is that there is extra weight
assigned by search engines to words within the body that are
hyperlinked. Since the <h1> contains all of my keywords, I thought it
would not hurt anything to give it a shot.

I'm not sure how turning all <h1> elements into <h1><a>etc contructs
will change search engine rankings. Some search engines (notably Goole)
check links from other sites to your pages. Is that what you have in mind?

On a general note, it's best not to write for search engines. Write for
people; use proper markup; make text rich sites; and get others to link
to you. The search engines will do their thing, and it should work out
reasonably well if you've done your job well.

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

Hi Brian,

I agree about writing for the user and going for outside links to me. I have
done this almost exclusively. However, there is a new indication that Google
is adding weight to both outbound links to sites of a similar theme and to
links within the body. This is a new concept and several guys are
experimenting with it to be sure that the algorithm is behaving in this way.
So far, it looks to be correct.

Having said that, my thought was "what would it hurt to link the keywords at
the top?" If the theory is right, I get the benefit, if it is not, no harm
done.

I did figure out how to do that at www.usernomics.com/testsite/test.html .
It doesn't seem to hurt anything.

Do you see a problem?

Bob

Jul 23 '05 #14

Bob

"Leif K-Brooks" <eu*****@ecritters.biz> wrote in message
news:2r*************@uni-berlin.de...

Bob wrote:
www.usernomics.com/testsite

This is off-topic, but I don't find the justified text to be very
usable. It ends up looking like this with really large
spaces; my eyes won't follow sentences over that much space.

Hummm, it looks pretty good to me on all the resolutions I looked at. What
resolution, browser, and screen size are you using where it has the spaces?

Thanks,

Bob

Jul 23 '05 #15

Darin McGrew

Re: www.usernomics.com/testsite
"Leif K-Brooks" <eu*****@ecritters.biz> wrote:

This is off-topic, but I don't find the justified text to be very
usable. It ends up looking like this with really large
spaces; my eyes won't follow sentences over that much space.

Bob <ergobob@sonic[no spam].net> wrote: Hummm, it looks pretty good to me on all the resolutions I looked at. What
resolution, browser, and screen size are you using where it has the spaces?

With Opera 7.54, a 1280x1024 display, and a 600x800 window, I see something
like this:

We are a
professional
consulting
company
specializing in
making products
and the
workplace more
efficient and
usable. Our staff specializes in User Interface Design,
Human Factors, and Workplace Ergonomics.

Once you get past the floated image, it isn't as bad, but it still isn't
great. With a larger minimum font size, it would be worse. Without a decent
minimum font size, I get the microfonts specified in your style sheet.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Advice is what you ask for when you know the answer but wish you didn't."

Jul 23 '05 #16

Bob

"Darin McGrew" <mc****@stanfordalumni.org> wrote in message
news:ci**********@blue.rahul.net...

Re: www.usernomics.com/testsite
"Leif K-Brooks" <eu*****@ecritters.biz> wrote:
This is off-topic, but I don't find the justified text to be very
usable. It ends up looking like this with really large
spaces; my eyes won't follow sentences over that much space.
Bob <ergobob@sonic[no spam].net> wrote:
Hummm, it looks pretty good to me on all the resolutions I looked at.
What resolution, browser, and screen size are you using where it has the

spaces?
With Opera 7.54, a 1280x1024 display, and a 600x800 window, I see something like this:

We are a
professional
consulting
company
specializing in
making products
and the
workplace more
efficient and
usable. Our staff specializes in User Interface Design,
Human Factors, and Workplace Ergonomics.

Once you get past the floated image, it isn't as bad, but it still isn't
great. With a larger minimum font size, it would be worse. Without a decent minimum font size, I get the microfonts specified in your style sheet.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Advice is what you ask for when you know the answer but wish you didn't."

Hello Darin,

Yes, I tried it in Opera 7.54 and could create the problem. But it requires
an extreme situation of high resolution and very small screen. You must be
using a handheld device?

Do many people have this type of setup?

Thanks,

Bob

Jul 23 '05 #17

Darin McGrew

Re: www.usernomics.com/testsite
I wrote:

With Opera 7.54, a 1280x1024 display, and a 600x800 window, I see
something like this:[...]

Bob <ergobob@sonic[no spam].net> wrote: Yes, I tried it in Opera 7.54 and could create the problem. But it requires
an extreme situation of high resolution and very small screen. You must be
using a handheld device?

I'm using a largish display (18" diagonal according to the ruler) at the
stated resolution, with the stated default window size, and with a minimum
font size of 12px. FWIW, I see similar results with MSIE, also using a
window about 600px wide, configured to ignore document font sizes (since
MSIE doesn't support a minimum font size).

Your style sheet specifies microfonts. If my browser overrides that, then a
reasonable non-fullscreen window yields short choppy lines of text that
scan poorly when justified. If my browser doesn't override that, then the
fonts are quite small.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Advice is what you ask for when you know the answer but wish you didn't."

Jul 23 '05 #18

Bob

"Darin McGrew" <mc****@stanfordalumni.org> wrote in message
news:ci**********@blue.rahul.net...

Re: www.usernomics.com/testsite
I wrote:
With Opera 7.54, a 1280x1024 display, and a 600x800 window, I see
something like this:[...]
Bob <ergobob@sonic[no spam].net> wrote:
Yes, I tried it in Opera 7.54 and could create the problem. But it
requires an extreme situation of high resolution and very small screen. You must be using a handheld device?

I'm using a largish display (18" diagonal according to the ruler) at the
stated resolution, with the stated default window size, and with a minimum
font size of 12px. FWIW, I see similar results with MSIE, also using a
window about 600px wide, configured to ignore document font sizes (since
MSIE doesn't support a minimum font size).

Your style sheet specifies microfonts. If my browser overrides that, then

a reasonable non-fullscreen window yields short choppy lines of text that
scan poorly when justified. If my browser doesn't override that, then the
fonts are quite small.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Advice is what you ask for when you know the answer but wish you didn't."

Ah, I see what you mean Darin. I know I can overcome this by permitting the
body font to be left justified rather than left/right justified.

But I was wondering what microfonts were and if there was a setting that
would overcome the problem without having to change the justification?

Thanks,

Bob

Jul 23 '05 #19

Brian

Bob wrote:

there is a new indication that Google is adding weight to both
outbound links to sites of a similar theme and to links within the
body.

Where did you learn this?

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

Jul 23 '05 #20

Bob

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:uo*********************@bgtnsc04-news.ops.worldnet.att.net...

Bob wrote:
there is a new indication that Google is adding weight to both
outbound links to sites of a similar theme and to links within the
body.

Where did you learn this?

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

It is an ongoing discussion on two search engine optimization (SEO) groups.
You can see one discussion at alt.internet.search-engines .

Bob

Jul 23 '05 #21

Similar topics