Global CSS declaration for "a" (i. e. "a href") tag

[knkk]

I have style definitions that look like this:

.a10b,
.a10b a:link,
.a10b a:visited,
.a10b a:hover
{
font: 10px Arial;
color: #000000;
text-decoration: none;
}
.a10b a:hover {text-decoration: underline}

I have 20 text styles, and for all of them I declare like this, resulting in a lengthy style sheet.

a:link and a:visited should always be {text-decoration: none} for me, and a:hover always {text-decoration: underline}.

If I could declare these in just one place, valid for all styles, I would save huge bytes. Is that possible?

Thank you very much for your time!

[phvfl]

You should be able to declare the underlines as:
[CODE=css]
a:link, a:visited{text-decoration:none ;}
a:visited{text-decoration:unde rline;}
a:active{text-decoration:none ;}
[/CODE]

I have included the :active pseudo selector as you did not include it so I don't know if you were aware of it. Unless you use any CSS with higher specificity then these rules should apply - the CSS order of the psuedo selectors for an anchor(link, visited, hover, active) is important so that the anchors function correctly. A good article on specificity is http://www.htmldog.com/guides/cssadvanced/specificity/ if you are interested in further reading on it.

Please let me know if this doesn't work and if this is the case is it possible to view the complete web page (HTML and CSS)?

[knkk]

phvfl, thanks for that. that works, but the links still turn blue (i. e. color isn't working).

This is what my code now looks like for a sample style:

a {text-decoration: none;}
a:hover {text-decoration: underline;}
/*global, as you suggested*/

.v10w
{
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
}
/*several other styles like this*/

however, something like

<DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>

results in the link turning blue :(. Do you have any ideas? My page is not online anywhere.

[knkk]

Okay, this works:

a {text-decoration: none;}
a:hover {text-decoration: underline;}

.v10w,
.v10w a
{
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
}
/*several other styles like this*/

That is, something like:

<DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>

now renders the link white, without underline, and with an underline only on hover.

It is a indeed huge reduction in code :). Now if only I could get rid of the ".v10w a" too. But I am pretty pleased with myself. Thanks a bunch, phvfl!

[phvfl]

There are a few options available to you. If all of you links (or the majority) are going to be one colour then you can define the color property within the global selectors. I

If you need to use a number of different colours then it may be best to put classes on each anchor e.g.
[HTML]
<div class="v10w">
<a class="red" href="#">some text</a><br />
<a class="green" href="#">some text</a><br />
<a class="grey" href="#">some text</a><br />
<a class="black" href="#">some text</a><br />
</div>
[HTML]
[CODE=css]
.red{color:#FF0 000;}
.green{color:#0 0FF00;}
.grey{color:#CC CCCC;}
.black{color:#0 00000;}
[/CODE]

The first link will be red, the second green, the third grey and the last black.

PS Don't know if it is caused by your developement environment (I know VS2003 is a pain in design mode) but html tags and attributes should really be lowercase