471,582 Members | 1,665 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,582 software developers and data experts.

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

49
I have style definitions that look like this:

Expand|Select|Wrap|Line Numbers
  1. .a10b,
  2. .a10b a:link,
  3. .a10b a:visited,
  4. .a10b a:hover
  5. {
  6. font: 10px Arial;
  7. color: #000000;
  8. text-decoration: none;
  9. }
  10. .a10b a:hover {text-decoration: underline}
  11.  
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!
Aug 20 '07 #1
4 2630
phvfl
173 Expert 100+
You should be able to declare the underlines as:
Expand|Select|Wrap|Line Numbers
  1. a:link, a:visited{text-decoration:none;}
  2. a:visited{text-decoration:underline;}
  3. a:active{text-decoration:none;}
  4.  
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)?
Aug 20 '07 #2
knkk
49
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:

Expand|Select|Wrap|Line Numbers
  1. a {text-decoration: none;}
  2. a:hover {text-decoration: underline;}
  3. /*global, as you suggested*/
  4.  
  5. .v10w
  6. {
  7. font-family: Verdana;
  8. font-size: 10px;
  9. color: #FFFFFF;
  10. }
  11. /*several other styles like this*/
  12.  
  13.  
however, something like

Expand|Select|Wrap|Line Numbers
  1. <DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>
  2.  
results in the link turning blue :(. Do you have any ideas? My page is not online anywhere.
Aug 20 '07 #3
knkk
49
Okay, this works:

Expand|Select|Wrap|Line Numbers
  1. a {text-decoration: none;}
  2. a:hover {text-decoration: underline;}
  3.  
  4. .v10w,
  5. .v10w a
  6. {
  7. font-family: Verdana;
  8. font-size: 10px;
  9. color: #FFFFFF;
  10. }
  11. /*several other styles like this*/
  12.  
That is, something like:
Expand|Select|Wrap|Line Numbers
  1. <DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>
  2.  
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!
Aug 20 '07 #4
phvfl
173 Expert 100+
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]
Expand|Select|Wrap|Line Numbers
  1. .red{color:#FF0000;}
  2. .green{color:#00FF00;}
  3. .grey{color:#CCCCCC;}
  4. .black{color:#000000;}
  5.  
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
Aug 20 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Joseph George | last post: by
3 posts views Thread by RiGGa | last post: by
83 posts views Thread by Alexander Zatvornitskiy | last post: by
2 posts views Thread by Thomas Matthews | last post: by
12 posts views Thread by a | last post: by
4 posts views Thread by the_init | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
1 post views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.