#1
  1. No Profile Picture
    Callin' PHP Docs !
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    74
    Rep Power
    12

    Question Applying CSS to a LINK


    Hi all...i have a confusion i was wondering if u can help me solve it. I want to create a style for a certain portion of the page that involves links. This portion comes up a lot of times so i wanted to create a stylesheet.css page and place the values there....

    A:link {text-decoration: none; color: #000000}
    A:visited {text-decoration: none; color: #000000}
    A:hover {text-decoration: none; font-weight: bold; color: #FF6600}

    How ever now i've got each link with the style above. Is it possible to make a class that would actually have "A:...." with in it and then i can probably call it through a span or a div.

    e.g <div class="speciallink"><ahref.......</a></div>
    and in a normal case <ahref "this is a normal link">Normal Link</a>

    I'd luv to hear form u folks !

    Sara
  2. #2
  3. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2038
    It's bit long winded, but works fine. There might be an easier way of doing it, but I've never found one!...
    Code:
    <html>
    <head>
    <style type="text/css">
    A:link {text-decoration: none; color: #000000}
    A:visited {text-decoration: none; color: #000000}
    A:hover {text-decoration: none; font-weight: bold; color: #FF6600}
    
    .one A:link{color:blue;text-decoration:none;}
    .one A:visited{color:blue;text-decoration:none;}
    .one A:hover{color:green;text-decoration: none; font-weight: bold;}
    
    .two A:link{color:red;text-decoration:none;}
    .two A:visited{color:red;text-decoration:none;}
    .two A:hover{color:blue;text-decoration: none; font-weight: bold;}
    
    .three A:link{color:green;text-decoration:none;}
    .three A:visited{color:green;text-decoration:none;}
    .three A:hover{color:red;text-decoration: none; font-weight: bold;}
    </style>
    </head>
    <body>
    <a href="#">This is just a standard link on your page...</a><br>
    <br>
    <div class="one">
    <a href="#">These are links of class "one"</a><br>
    <a href="#">These are links of class "one"</a><br>
    </div><br>
    
    <div class="two">
    <a href="#">These are links of class "two"</a><br>
    <a href="#">These are links of class "two"</a><br>
    <div><br>
    
    <div class="three">
    <a href="#">These are links of class "three"</a><br>
    <a href="#">These are links of class "three"</a><br>
    </div>
    </body>
    </html>
  4. #3
  5. HTML/CSS/Photoshop maven
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    CA
    Posts
    184
    Rep Power
    12
    You can also do a.class1:hover {style} and so on.

IMN logo majestic logo threadwatch logo seochat tools logo