SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    USA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie question: Different colored links

    I've just started learning style sheets and I have a basic question:

    How do I show different colored links in one area?

    Thanks!
    Holly

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Do you want the color to be different for just that one section of the site? If so, wrap your links in, for example a <div>, give that div a class, and style using that. Here's an example:

    HTML:
    HTML Code:
    <div class="mylinks">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products.html">Products</a></li>
    </ul>
    </div>
    CSS:
    Code:
    .mylinks a {
      /*this will style all links inside of an element with
      a class of 'mylinks'*/
      color: #ff9900;
      font-weight: bold;
    }
    Hope this helps!

  3. #3
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another way of doing it is by having four different Style classes in your CSS as below:

    a:link { color: red; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a:active { color: red; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a:visited { color: red; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a:hover { color: red; text-decoration: underline; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    Simply change the colour, decoration, etc on the different states to give different effects.

  4. #4
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - just realised you wanted different coloured links in just one area.

    This can be done using different link classes like below:

    a.one:link { color: red; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a.one:active { color: red; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a.one:visited { color: red; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a.one:hover { color: red; text-decoration: underline; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}


    a.two:link { color: blue; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a.two:active { color: blue; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a.two:visited { color: blue; text-decoration: none; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    a.two:hover { color: blue; text-decoration: underline; background: none; font-family : Verdana, Arial, Helvetica, sans-serif;}

    Hope this helps.


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
  •