+ Reply to Thread
Results 1 to 6 of 6

Thread: Links and Changing the Styles

  1. #1
    Full Member Steveo31 is on a distinguished road
    Join Date
    Jan 2004
    Posts
    40

    Links and Changing the Styles

    I have been lookin for this a while, and maybe you are too.

    I think links are better "looking" when they aren't a given color when active, and a different color when they are. The whole blue-then-purple scheme is very, ehh, static. At my site (under construction), I have black background, and the color scheme is red/white/black. Here's the code for the links:
    Code:
    
    A:LINK     {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}
    
    A:VISITED  {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}
    
    A:ACTIVE   {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:underline;
                font-size:7pt}
    
    A:HOVER    {font-family: Verdana, Sans-serif;
                color:#FF0000;
                text-decoration:underline;
                font-size:7pt}
    
    </STYLE>
    This will make the links, regardless of if they are visited or not, white with no underline when not rolled over, and red with underline when rolled over.

    You can change the colors, font styles, fonts and whatnot of the different states of links in that bit of code. You could replace "underline" with bold, italic and 'line-through'. I don't know what the last one does....

    Just put this in the 'head' section of the HTML page.

    -Steve

  2. #2
    Full Member Reaction is on a distinguished road
    Join Date
    Jan 2004
    Location
    Auckland, New Zealand
    Posts
    39
    Usually sites that have changing link colors when visited are search engine sites and directory sites. If you just have a basic community site/e-commerce site or whatever its best to just go with the normal link colors. This way you dont have to worry about changing colors.

    On a side not the colors you have used for your site and really good and contrast well. Good job on the CSS.

  3. #3
    Full Member jpigford is on a distinguished road
    Join Date
    Jan 2004
    Location
    Mississippi
    Posts
    6
    Make note that you don't have to apply an "active" pseudo class. Just link, visited, and hover...in that order. And to compact your code a bit you can do the following:

    original:
    Code:
    A:LINK     {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}
    
    A:VISITED  {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}
    new compact:
    Code:
    a:link, a:visited  {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}

  4. #4
    Full Member Reaction is on a distinguished road
    Join Date
    Jan 2004
    Location
    Auckland, New Zealand
    Posts
    39
    thats a good point jpigford, i didnt know that until now

  5. #5
    Moderator airnine is on a distinguished road
    Join Date
    Jan 2004
    Posts
    78
    some good and valuable tips you have here guys, thanks

    Airnine
    -------------------------------
    Airnine is a developer @
    www.promomedium.com
    -------------------------------

  6. #6
    Full Member Steveo31 is on a distinguished road
    Join Date
    Jan 2004
    Posts
    40
    Originally posted by jpigford
    Make note that you don't have to apply an "active" pseudo class. Just link, visited, and hover...in that order. And to compact your code a bit you can do the following:

    original:
    Code:
    A:LINK     {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}
    
    A:VISITED  {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}
    new compact:
    Code:
    a:link, a:visited  {font-family: Verdana, Sans-serif;
                color:#FFFFFF;
                text-decoration:none;
                font-size:7pt}

    Yes...good point! Thank you!

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

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