#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    13

    What's the trick on using a:link colors in external css?


    I'm just starting to experiment with external css files and I'm stuck on how to deal with setting color for the links.

    When I put this in the html page itself it works fine:

    <style type="text/css">
    a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
    </style>


    But when I instead move it to the body section of my external css file and link to that css from my html file, it doesn't do anything (link colors just go back to the default). I know I'm generally setting up the external css file correctly since the other things I set in that external file get picked up correctly (font family, font size, background image, etc.).

    Any magic to using link colors in an external sheet??

    In case it helps, here is my css file:

    Code:
    body {
      background-color: #000033;
      color: white;
      background-image:url(balbkgnd.gif);
    a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
     }
    
    td {
      font-size: 12.0pt;
      font-family: Trebuchet MS;
      a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
    }
    
    th {
      font-size: 12.0pt;
      font-family: Trebuchet MS;
      a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
    }
  2. #2
  3. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    It shouldn't be in the 'body':

    Code:
    body {
      background-color: #003;
      color: white;
      background-image:url(balbkgnd.gif);
    }
    a:link {color: #F00;
    }
    a:visited {color: #0F0;
    }
    a:hover {color: #F0F;
    }
    a:active {color: #00F;
    }
    Try breaking them out of the body, that should fix it.

    wdn2k
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I'm going to guess that you've confused the poor browser. You can't nest style rules as you've done.
    Code:
    th {
      font-size: 12.0pt;
      font-family: Trebuchet MS;
      a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
    }
    Instead, do this;
    Code:
    th {
        font-size: 12.0pt;
        font-family: "Trebuchet MS";  /*must use parentheses where there are spaces*/
        }
    
    th a:link {
        color: #FF0000;
        }
    
    th a:visited {
        color: #00FF00;
        }
    
    th a:hover {
        color: #FF00FF;
        }
    
    th a:active {
        color: #0000FF;
        }
    If you're not changing anything, there's no reason to specify a: again and again—it's inherited.

    cheers,

    gary
    Last edited by kk5st; May 22nd, 2004 at 02:06 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    13
    Thanks guys. Breaking it out of hte body did the trick. But why was that necessary? I would have tought that 'body' included everything you can see on a page.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Well, you could do

    body a:visited { whatever }

    Using a simple un-nested a: makes the parent html, so same difference, but a lot more clear.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    13
    Got it, but here are two more follow ups:

    1. The other link, visited and hover colors work fine but I can't get a:active to work properly...the link for the active page remains the same as the link for other visited pages. Any tricks on that one?

    2. Different subject but still on CSS: I've been reading about line-height as a way to control the space between the lines but I can't seem to master it when I try it on my pages. The material explaining how to use it talks about distance 'from the baseline...exactly what is that? Using a value of 0 does not do what I would expect.
  12. #7
  13. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    1) I think you may be misunderstanding the meaning of 'active'. Links have several 'states' (if you will).
    - Just sitting there being a link.
    - Hover, which is when a mouse is over the link.
    - Active, which is when the link is clicked.

    I rarely bother with defining an 'active' state via CSS because it's only a momentary state of being before the page changes. I suppose some neat effect may be able to be acheived but I don't usually concern myself with the 'bells & whistles' end of things.

    2) I haven't messed with line height. In a lot of ways CSS just isn't there for cross-broswer page layout, IMO. I'm sure there are some that swear by it, but I'm an 'old-timer' and use tables extensively to acheive the layout I want. Done correctly, there's very few browser dependant display problems with tables. If it's something you rreally want to learn about, keep messing with it, but be sure to check the results in multiple browsers.

    wdn2k
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    13
    Originally Posted by wdn2000
    1) I think you may be misunderstanding the meaning of 'active'. Links have several 'states' (if you will).
    - Just sitting there being a link.
    - Hover, which is when a mouse is over the link.
    - Active, which is when the link is clicked.

    I rarely bother with defining an 'active' state via CSS because it's only a momentary state of being before the page changes. I suppose some neat effect may be able to be acheived but I don't usually concern myself with the 'bells & whistles' end of things.

    2) I haven't messed with line height. In a lot of ways CSS just isn't there for cross-broswer page layout, IMO. I'm sure there are some that swear by it, but I'm an 'old-timer' and use tables extensively to acheive the layout I want. Done correctly, there's very few browser dependant display problems with tables. If it's something you rreally want to learn about, keep messing with it, but be sure to check the results in multiple browsers.

    wdn2k
    Thanks. So if I have a long list of links on each of my many pages and I want the link for the open page to be a different color, the only way to do that is manually in each and every page? (I was hoping there would be a way to do it automatically so that when I'm done with the link list in one page I can copy it and then paste it into every other page without having to change it.)
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by asinsh
    Thanks. So if I have a long list of links on each of my many pages and I want the link for the open page to be a different color, the only way to do that is manually in each and every page? (I was hoping there would be a way to do it automatically so that when I'm done with the link list in one page I can copy it and then paste it into every other page without having to change it.)
    When you click a link, and go to another page, the link doesn't have focus, nor is it active on the new page. Remember, each page wakes up in a whole new world. Your browser cache keeps track of where you've been, thus the visited pseudo class.

    Put your list of links in an included file for ease of maintenance. You should do this for any bit of content that appears on multiple pages.

    Give each link its own id. For example, the link to "About Us" might be id'd as aboutus.

    On the About Us page, imbed style rules for #aboutus. eg.
    Code:
    #aboutus a, #aboutus a:visited {
        color: red;
        background-color: gray;
        }
    Do the same on each page with the appropriate id. It may look like a PITA, but is actually very simple to implement.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo