SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Sydney Australia
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help With Css Please

    Hi,

    Following is my working style sheet


    BODY { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #333333; FONT-SIZE: 10px; }

    TD { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    FONT-SIZE: 10px;
    COLOR: #333333; }

    A { COLOR: #000099; text-decoration: NONE}

    A:HOVER {
    text-decoration: none;
    color: Red; }
    A:visited { color: #666666; text-decoration: none}

    A:VISITED:HOVER { color: Red; text-decoration: underline }

    H1 {FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 17px; COLOR: #000066; }

    Following (not working) is where I am trying to add a "class" thing so that I can have certain links in different colour and different hover colour etc


    .color01 {
    /* new colour link*/
    A: color: Green;
    A: visited color: #666666;
    text-decoration: none
    A:VISITED:HOVER {color: black; text-decoration: underline;
    }

    Also, when I want to apply the class thing in the html page that links to the style sheet, where in (or in relation to ) the link tag do I put the class="colour01"

    With text it is easy to go <p class="another_colour"> example text</P>
    but where in the link tag goeth the class thing please?

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

    I think it better id I send you to the faq here:

    http://www.sitepoint.com/forums/showthread.php?t=171943#

    Which answers all your questions and shows you various ways to do it.

    Its worth noting that you can never put selectors inside a style decaration as you have done here:
    Code:
    color01 {
    /* new colour link*/
    A: color: Green;
    A: visited color: #666666;
    text-decoration: none
    A:VISITED:HOVER {color: black; text-decoration: underline;
    }
    You style the links by defining them like so:
    Code:
    .color01 a:link {color:green}
    .color01 a:visited {colour:red}
    .color01 a:hover {colour:white}
    .color01 a:active {colour:yellow}
    html:
    Code:
    <div class="color01">
    <a href="#">This link will be green</a>
    <a href="#">This link will be green</a>
    <a href="#">This link will be green</a>
    </div>
    Or alternatively like this:
    Code:
    a.color01:link {color:green}
    a.color01:visited {colour:red}
    a.color01:hover {colour:white}
    a.color01:active {colour:yellow}
    html:
    Code:
    <div>
    <a class="color01" href="#">This link will be green</a>
    <a href="#">This will be default color</a>
    <a href="#">This will be default color</a>
    </div>
    Read the FAQ for a thorough explanation

    paul
    Last edited by Paul O'B; Aug 25, 2004 at 07:23.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Sydney Australia
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul. clear answer and will study FAQ

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Sydney Australia
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the significance of the div tag here? Do I have to use it?
    R

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you mean the last example then it has no significance.

    This is fine:
    Code:
    <a class="color01" href="#">This link will be green</a>
    <a href="#">This will be default color</a>
    <a href="#">This will be default color</a>
    Paul
    Last edited by Paul O'B; Aug 25, 2004 at 07:23.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Sydney Australia
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.
    I had tried this but I had a quote after the class name.
    <a class="color01" href="#">This link will be green</a>
    Curious how you can have a seemingly "orphaned" quote mark.
    R

  7. #7
    SitePoint Enthusiast yodaddy's Avatar
    Join Date
    Aug 2004
    Location
    georgetown, tx
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rockerz
    Thanks Paul.
    I had tried this but I had a quote after the class name.
    <a class="color01" href="#">This link will be green</a>
    Curious how you can have a seemingly "orphaned" quote mark.
    R

    Paul just made a simple mistake. The quote should be around the class parameter.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    <a class="color01" href="#">
    That's correct there was a missing quote in my example - sorry

    Paul


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
  •