CSS - A color within H2

[Simon Harris]

Hi All,

I have my A tags (links) set to green when they are on the body or table
cells. This works Ok.

I have a background color of orange on my H2 tags, I want to use black for A
tags in this case.

I have tried the following, which doesnt work (Links remain green).

h2 a {
color: #000000;
}

Any idea where I have gone wrong? Have copied my entire CSS for reference,
below.

Many Thanks,

Simon.

PS: Could not find a CSS specific group - Hope this is not OT!

body {
background-color : #FFFFCC;
font: 8pt/10pt verdana;
margin: 0px;
text-align:center;
}

a {
font: 8pt/10pt verdana;
color : #009900;
}

a:hover {
font: 8pt/10pt verdana;
color : 000000;
}

a:visited {
font: 8pt/10pt verdana;
color : #005100;
}

h1 {
font: 18pt/20pt impact;
font-weight: bold;
color: #FF9900;
}

h2 {
font: 8pt/10pt verdana;
font-weight:bold;
background-color: #FF9900;
margin:0px 0px 0px 5px;
width:70%;
padding: 2px 10px 2px 6px;
}

h2 a {
color : #000000;
}

h3 {
font: 8pt/10pt verdana;
font-weight:bold;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

td {
font: 8pt/10pt verdana;
color :#000000;
}

..navdv {
width: 100%;
}

..tableinner {
background-color : #FFFFEA;
padding: 5px;
border: 1px solid #9A9A9A;
width: 730px;
margin:0px;
align:center;
}

..tableouter {
background-color : #FFFFFF;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
width: 750px;
height: 100%;
margin:0px;
margin-left:auto;
margin-right:auto;
}

..tableinner td a {
font: 8pt/10pt verdana;
font-weight: bold;
color : #009900;
}

..tableinner td a:visited {
font: 8pt/10pt verdana;
font-weight: bold;
color : #005100;
}

..tableinner a:hover {
font: 8pt/10pt verdana;
font-weight: bold;
color :#000000;
}

..countynav {
font-weight : bold;
}

..navtable {
width: 750px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}

..header {
background-color:#66FF66;
background-image:url('/assets/images/header_bg.gif');
}

..GreenBorderDiv {
display:block;
float:right;
border: 1px solid #00DD00;
padding: 5px;
}

..faded {
colour: #666666;
font-size: 8.5px;
}

..attPhoto {
border: 1px solid #000000;
}

..navButCell {
background: url('/assets/images/nav/nav_bg.gif');
}

..attDiv {
border:1px solid #FF9933;
padding: 5px 5px 20px 5px;
}

..section {
padding: 5px 5px 20px 5px;
border: 1px solid #FF9900;
margin-bottom: 15px;
margin-right: 5px;
margin-left: 5px;
}

..sectionNoBorder {
padding: 5px 5px 20px 5px;
margin-bottom: 15px;
margin-right: 5px;
margin-left: 5px;
}

..breadcrumbtrail {
font: 8pt/10pt verdana;
text-align:left;
font-weight: bold;
margin-left: 10px;
padding: 0px 0px 5px 0px;
}



--
--
* Please reply to group for the benefit of all
* Found the answer to your own question? Post it!
* Get a useful reply to one of your posts?...post an answer to another one
* Search first, post later : http://www.google.co.uk/groups
* Want my email address? Ask me in a post...Cos2MuchSpamMakesUFat!

 

[Ben C]

Hi All,

I have my A tags (links) set to green when they are on the body or table
cells. This works Ok.

I have a background color of orange on my H2 tags, I want to use black for A
tags in this case.

I have tried the following, which doesnt work (Links remain green).

h2 a {
color: #000000;
}

Any idea where I have gone wrong? Have copied my entire CSS for reference,
below.

Many Thanks,

Simon.

PS: Could not find a CSS specific group - Hope this is not OT!

[...]

I think it's OK. The other one is
comp.infosystems.www.authoring.stylesheets.

It looks like the problem may be that this selector:

h2 a {
color : #000000;
}

[...]

is less "specific" than this one:

.tableinner td a {
font: 8pt/10pt verdana;
font-weight: bold;
color : #009900;
}

basically since the second one involves more stuff-- a class and two
elements. See http://www.w3.org/TR/CSS21/cascade.html#specificity

 

[Jukka K. Korpela]

Scripsit Simon Harris:

I have my A tags (links) set to green when they are on the body or
table cells. This works Ok.

No it doesn't. People have to guess what green means, instead of immediately
noticing nice tasty blue links with a delicious underline.

I have a background color of orange on my H2 tags, I want to use
black for A tags in this case.

As a rule of thumb, keep links out of headings.

h2 a {
color: #000000;
}

It fails to have the desired effect because another CSS rule overrides its
effect, by its specificity. More seriously, if it worked, it would remove
the vital distinction between visited and unvisited (and hovered) links as
well as set color against an unspecified background.

If you really, really needed to set link colors inside headings, you should
do something like

h2 a:link { color: blue; background: white; }
h2 a:visited { color: magenta; background: white; }
h2 a:link:hover, h2 a:visited:hover { color: red; background: white; }

(and this is a _simple_ version). If you want to use the same background as
for the h2 element in general, you need to think hard to find colors are
easily readable against that background, differ from each other
sufficiently, and are close enough to common default link colors to give a
hint.

Have copied my entire CSS for reference, below.

How long did you actually read this group before posting? There are _daily_
flames about posting bulks of code and not a URL. How did you miss that
advice?

body {
background-color : #FFFFCC;
font: 8pt/10pt verdana;
margin: 0px;
text-align:center;
}

Sorry, you should rewrite your style sheet from scratch. That's far easier
and faster than fixing it.

The above already suggests that it went on the wrong track. For example,
setting font size to 8pt is so wrong that it should be criminal (and might
be a criminal violation of accessibility laws in some countries).

 

[Bernhard Sturm]

Scripsit Simon Harris:


No it doesn't. People have to guess what green means, instead of
immediately noticing nice tasty blue links with a delicious underline.

Which is what I always wondered: defining a hyperlink by setting the
color to blue and underline it, is just one of the mysteries of the
default definitions. Psychologically it's utter nonsense to use 'blue'
for something you would like the user to click at. A more 'active' color
is far better than the tranqulizing blue (it's far removed from being
'tasty'). And the argument, that we are all now used to blue underlined
links falls flat if you are really serious in striving for better
solutions (otherwise there would still be one button mice for macs).
But I do agree: green is a likewise bad choice as blue. Use active
colors instead.

cheers
bernhard

 

[dorayme]

font: 8pt/10pt verdana;

[/QUOTE]

The above already suggests that it went on the wrong track. For example,
setting font size to 8pt is so wrong that it should be criminal ...

And will be if my plans to become the ruler of the world succeed.

 

[dorayme]

Which is what I always wondered: defining a hyperlink by setting the
color to blue and underline it, is just one of the mysteries of the
default definitions. Psychologically it's utter nonsense to use 'blue'
for something you would like the user to click at. A more 'active' color
is far better than the tranqulizing blue (it's far removed from being
'tasty'). And the argument, that we are all now used to blue underlined
links falls flat if you are really serious in striving for better
solutions (otherwise there would still be one button mice for macs).
But I do agree: green is a likewise bad choice as blue. Use active
colors instead.

There is an argument to say the horse has bolted on this one and
links are blue and underlined because that is the way it has gone
and everyone has gotten used to this and expects it.

Beyond this general rule of thumb, there is every opportunity to
diverge and anyone who refuses either wants to keep life simple
or is a miserable no-good lackey of fashion.

If anyone finds this analysis helpful, please send $10.

 

[Jukka K. Korpela]

Scripsit Bernhard Sturm:

Which is what I always wondered: defining a hyperlink by setting the
color to blue and underline it, is just one of the mysteries of the
default definitions.

I suppose we don't want to know the real events behind this mystery; it
might be too maddening. Some day, someone decided to make links blue and
underlined, for some odd reason, and was imitated by others.

Psychologically it's utter nonsense to use 'blue'
for something you would like the user to click at.

It's not a matter of wanting them to click at something.

A more 'active' color is far better than the tranqulizing blue

I won't ask what colors are active to you (it must be fairly personal),
since I think the whole idea of activity is wrong. Links are relations, not
actions. A link simply says that _there is_ some related information (or
data) that can be accessed (relatively) immediately by activating the link.
It should not convey the idea "click me" or "activate me" (still less to
_say_ so!) but rather "I'm at your service".

Links should be like good servants: available, but not pushy; findable when
needed, but not aggressively prominent.

One of the mysteries is why colors and underlining were taken into use
instead of the fairly established _encyclopedia_ practice of using some kind
of an arrow before a word (to indicate that there is a relevant entry for
that word). It cannot have been a character repertoire problem, since even
">" would have worked fairly well. Admittedly, the arrows tend to make
reading less smooth, since visually they act like delimiters.

Thus, my idea of link colors is to keep them similar to typical browser
defaults but _less_ striking, e.g. #0000af instead of "pure" blue (#0000ff).

And the argument, that we are all now used to blue
underlined links falls flat if you are really serious in striving for
better solutions

Better as regards to what? If your purpose is to make the world safe for
clever linking, you might want to sacrifice the practical usability and
popularity of your site, though no success is guaranteed of course, no
matter how much you sacrifice.

 

[dorayme]

Scripsit Bernhard Sturm:


I suppose we don't want to know the real events behind this mystery; it
might be too maddening. Some day, someone decided to make links blue and
underlined, for some odd reason, and was imitated by others.

Blue underlining is a variety of the QWERTY phenomena. But, with
the QWERTY keyboard layout, there were mechanical reasons (the
keys were laid out to make old typewriters less prone to sticking
via their key wires jamming). From then on, of course, all
attempts at different layouts have been highly marginalised.

 

[patrick j]

Blue underlining is a variety of the QWERTY phenomena. But, with
the QWERTY keyboard layout, there were mechanical reasons (the
keys were laid out to make old typewriters less prone to sticking
via their key wires jamming). From then on, of course, all
attempts at different layouts have been highly marginalised.

As a touch typist I'm quite glad in one way that QWERTY has remained so
ubiquitous. However part of me wishes the (imho) much better chording
keyboard had been a success.

I believe you are absolutely right that the QWERTY keyboard has the keys as
they are so that old typewriters were able to function with fewer clashes,
but in fact the whole concept of the keyboard that we use, regardless of
the actual position of each key, is a legacy from a mechanical system for
which it had to be that one key is used for one letter.

Once the keyboard is electronic then there is no need for one key to be for
one letter and so the wonderful chording keyboard can happen:

<http://en.wikipedia.org/wiki/Chording_keyboard>

I think the ideal is to have the keyboard designed for the left hand
leaving the right hand free which for right handed people would be very
handy for sipping coffee, that kind of thing.

The chording keyboard is much faster to learn how to use than touch typing.
You would be surprised how fast it is to get into the way of it.

I think the primary reason for the chording keyboard not becoming popular
is that it is simply different and requires comprehension and of course in
the free market anything that is different and cannot just present its
advantage in an extremely immediate way will have a difficult time.

 

[dorayme]

Once the keyboard is electronic then there is no need for one key to be for
one letter and so the wonderful chording keyboard can happen:

<http://en.wikipedia.org/wiki/Chording_keyboard>

mm... interesting.

 

[patrick j]

mm... interesting.

Your posting reminded me of how much I like chording keyboards. It seems
there is one currently in manufacture here in the UK.

<http://www.bellaire.demon.co.uk/index.html>

I'm giving it consideration.