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

Discussion in 'CSS' started by knkk, Aug 20, 2007.

  1. #1
    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}
    
    Code (markup):
    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!
     
    knkk, Aug 20, 2007 IP
  2. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #2
    Simply add:

    a {
    text-decoration: none;}

    a:hover {
    text-decoration: underline;}

    and the other elements will pick that up.
     
    Katy, Aug 20, 2007 IP
  3. knkk

    knkk Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks Katy. Unfortunately, that does not seem to be working. This is what my code looks like for a sample style:

    
    a {text-decoration: none;}
    a:hover {text-decoration: underline;}
    
    .v10w
    {
    font-family: Verdana;
    font-size: 10px;
    color: #FFFFFF;
    }
    /*several other styles like this*/
    
    
    Code (markup):
    however, something like

    
    <DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>
    
    Code (markup):
    results in the link turning blue :(.

    Apologies, maybe I did not say that right. The global defs for "a" are working, but the links turn blue, instead of staying the color of the class.

    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*/
    
    Code (markup):
    That is, something like:
    
    <DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>
    
    Code (markup):
    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, Katy - you really did me a huge turn here!
     
    knkk, Aug 20, 2007 IP
  4. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #4
    The links turn blue because you didn't specify a class. ;) You should use this code:

    a.v10w {
    font-family: Verdana;
    font-size: 10px;
    color: #FFFFFF;
    }

    and

    <a class="v10w" href="link.html">link</a>

    :)
     
    Katy, Aug 21, 2007 IP
  5. knkk

    knkk Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    a.v10w would take care of only links with the v10w class, right? I still need a declaration for just plain v10w (e. g. DIV CLASS="v10w">test</DIV>)...

    I therefore am using:

    
    .v10w,
    .v10w a
    {
    styles
    }
    
    Code (markup):
    I need to test if just a.v10w will work for both cases (link and non-link)...
     
    knkk, Aug 25, 2007 IP