SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help needed with overriding link styles

    Is it possible to override the link styles that have been applied to a certain style? I have a style called listingpage which defines the links in the table as being normal grey text. However, I also want to put in links within the listing section which are blue and bold. How do I override the style that I assigned to the listingpage style? I tried using a span class but that didn't override it and the links stayed grey as normal. My styles are as follows:

    .listingpage table td a:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #3082AD;
    font-weight: bold;
    }
    .listingpage table td a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #3082AD;
    font-weight: bold;
    }
    .bluebold a:link{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333333;
    font-size: 11px;

    }
    .bluebold a:hover{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333333;
    font-size: 11px;
    }

    I am trying to use the style as follows:

    <div class="listingpage">
    <table>
    <tr>
    <td>text <a href="#">link</a></td>
    <td> More text <span class="bluebold"><a href="#">more</a></span>
    <td>text <a href="#">link</a></td>
    </td>
    </table>
    </div>

    I know it has something to do with the nesting of the styles and the fact that the listingpage style is more specific but I am not sure how I can override it. I have a generic link style as well which is slightly different again so I don't just want to move the grey link into the main style. Any help is most appreciated.

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could just use .bluebold and call it like this: <a href="#" class="bluebold">more</a>.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your reply. I have tried this but the link is still grey and not blue. Do you have any other ideas?

    I played around with it and tried the following:
    <a href="#"><span class="bluebold">more</span></a>

    which kind of worked in that the link has become blue but the underline underneath the text is still grey and it's not particularly ideal. Any further ideas would be most appreciated.

  4. #4
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, when I look at the code in your first post, at bluebold you put color:#333333; which is gray. Maybe you just put the wrong color?

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is question of weight (specifity) and your original anchor styles are more specific than a simple class and carry more weight and therefore override your bluebold class.

    If you add the same path to the bluebold style you will add more weight to it and it will then be applied.

    e.g.
    .listingpage table td a.bluebold{etc..}

    By adding the full "path" as per the original styles you are appying equual weight and now it will over0ride the styles that cam before. You could have used !important in the styles to make a similar effect and give the style more importance.

    Your code is also duplicating a lot of the same styles for no reasons and can be simplified to this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .listingpage table td a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #3082AD;
    font-weight: bold;
    } 
    .listingpage table td a.bluebold{
    color: #333;
    font-size: 11px;
    }
    </style>
    </head>
    <body>
    <div class="listingpage">
    <table>
    <tr>
    <td>text <a href="#">link</a></td>
    <td> More text <a class="bluebold" href="#">more</a></span>
    <td>text <a href="#">link</a></td>
    </td>
    </table>
    </div>
    </body>
    </html>
    Hope that helps

    P.S. bluebold isn't a good name for a class because later on you may decide red is a better colour and then you have to edit the html rather than the css otherwise you end up with bluebold in the html that is actually turning things red and could be confusing. Use more generic names that describe what's happening without being specific to colours.

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Fantastic - thanks heaps! The tips are also most appreciated.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •