Making a class for links

Discussion in 'Programming' started by Skribblez, Apr 28, 2006.

  1. #1
    Hi,

    Does anyone know how to make classes for links? Here's a link to my problem:
    http://www.trickarcade.com

    The links in the main content area are light blue, and the links on the navigation are also light blue, and obviously don't work well with the background color of the cell. Is there any way I can set a class for links?

    Example: <a href="index.php" class="navigation">Home</a>

    The class would automatically make the link white or whatever color I specified for the class. I'd prefer to do this rather than the font color tag simply because it looks more clean, IMO.

    And then, maybe somewhere at the top or in the CSS, I would add something like:

    class.navigation = "#FFFFFF"

    And then I could make a separate class for the links in the main content area:

    class.content = "some blue color"

    I don't know if I'm making sense here, but, you get the point! I'm pretty sure this is possible, just don't know the tags to use.. :(

    Thanks in advance! :)
     
    Skribblez, Apr 28, 2006 IP
  2. hasbehas

    hasbehas Well-Known Member

    Messages:
    726
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    190
    #2
    create a blank text file first.
    then add your styles into this file.
    ie; file style.txt
    and in the file use these

    .........
    
    
    body {
    font:12px Arial,MS Sans Serif;
    background: #E3DFE0 url(images/background.jpg)
    }
    
    //applies to all links
    
    A:visited {text-decoration:none;color:#000000} 
    A:hover {text-decoration:underline;color:#000000} 
    A:link {text-decoration:none;color:#000000}
    A:active {text-decoration:none;color:#000000}
    
    //applies to links that have the class ie; <a href="a.htm" class="linktype1">
    .linktype1:visited {text-decoration:none;color:black}
    .linktype1:hover {text-decoration:none;color:blue}
    .linktype1:link {text-decoration:none;color:black}
    .linktype1:active {text-decoration:none;color:red}
    
    .class1
    {font:13px MS Sans Serif,Arial;
    color:#000000;
    }
    
    .tdclass2
    {font:13px MS Sans Serif,Arial;
    color:#000080;
    background-color:#D8E8F5;
    border-bottom: none;
    }
    
    Code (markup):
    .............

    Then rename the extention to .css

    Then in the html fıle add this line between >head< tags
    <link REL="STYLESHEET" TYPE="text/css" HREF="styles.css">

    Hope it helps..
     
    hasbehas, Apr 28, 2006 IP
    Skribblez likes this.
  3. Skribblez

    Skribblez Notable Member

    Messages:
    5,939
    Likes Received:
    208
    Best Answers:
    0
    Trophy Points:
    280
    #3
    Exactly what I was after! :)

    Thanks hasbehas! ;)
     
    Skribblez, Apr 29, 2006 IP