#1
  1. Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Kristiansand - Norway
    Posts
    122
    Rep Power
    20

    Post Overwriting a CSS style once.


    I have CSS for handeling links.
    Code:
    a:link {  
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #0000FF;
     text-decoration: none;
    ; font-style: normal
    }
    and so on for visited, active and hover.

    My problem is that at some few places I want to alter the link text to be at bit smaler.

    How could I acomplish this?
    -=| Agnus Dei |=-
    http://www.crinos.org
  2. #2
  3. Corporate Stooge
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Aberdeen, Scotland
    Posts
    134
    Rep Power
    14
    Create another style in the stylesheert.

    i.e.

    a.classname {font-size: 10px;}

    then when you create the link use the class attribute.

    i.e.

    <a class="classname" href="linkpage.asp">Link Text</a>

    Hope that helps.
    Never sign your code....it leaves you liable!
  4. #3
  5. Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Kristiansand - Norway
    Posts
    122
    Rep Power
    20
    That was the first thing I tried.

    But wont work. I've allso tried to make a new style with a new set of link styles within... But still doesn't work.

    Code:
    .submenu {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
     color: #000000;
    
    a:link {  
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
     color: #0000FF;
     text-decoration: none;
    ; font-style: normal
    }
    
    a:visited {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
     color: #0000FF;
     text-decoration: none;
    ; font-style: normal
    }
    
    a:active {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
     color: #FF0000;
     text-decoration: underline;
    ; font-style: normal
    }
    
    a:hover {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
     font-style: normal; color: #0000FF;
     text-decoration: underline;
    }
    }
    Any Ideas?
    -=| Agnus Dei |=-
    http://www.crinos.org
  6. #4
  7. Corporate Stooge
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Aberdeen, Scotland
    Posts
    134
    Rep Power
    14
    I use that all the time!! That was ripped out of a CSS that I'm using at the moment!

    Try putting the general a.link a.hover etc at the bottom of the CSS and the custom classes at the top. After all CSS can be picky about ordering and comments.
    Never sign your code....it leaves you liable!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Noodles way should work

    <html>
    <head>
    <style>
    a:link
    { color: blue; font-size: 10px; text-decoration: underline }
    a:active
    { color: blue; font-size: 10px; text-decoration: underline }
    a:visited
    { color: blue; font-size: 10px; text-decoration: underline }
    a:hover
    { color: green; font-size: 10px; text-decoration: none }

    a.menu:link
    { color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
    a.menu:active
    { color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
    a.menu:visited
    { color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
    a.menu:hover
    { color: green; font-size: 14px; font-weight: bold; text-decoration: none }
    </style>
    </head>

    <body>
    <p><a href="#" class="menu">Menu Link 1</a><br>
    <a href="#" class="menu">Menu Link 2</a></p>
    <p><a href="#">Normal Link 1</a><br>
    <a href="#">Normal Link 2</a></p>
    </body>
    </html>
  10. #6
  11. Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Kristiansand - Norway
    Posts
    122
    Rep Power
    20

    Thumbs up


    Got it working now... thanks. I allso had a typo error, wich I didn't see before...
    -=| Agnus Dei |=-
    http://www.crinos.org

IMN logo majestic logo threadwatch logo seochat tools logo