SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Inline Style?

  1. #1
    SitePoint Enthusiast that_tim_fella's Avatar
    Join Date
    Feb 2003
    Location
    England
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline Style?

    Hi,

    I've got an external style sheet that (amongst other things) dictates the way my links appear.

    I would like just one of these links to appear differently, so I've been trying to embed a STYLE parameter within the particular <a> tag, like: <a href='edit_element.php' style 'the style I want'>

    This works fine if I want to change the color or something, but I don't know how to add the equivalent of: a:link { color: #000066; text-decoration: none}
    a:visited { text-decoration: none } that is in the external sheet.

    I've got a feeling it can't be done this way. Any way to do it using style sheets? Or maybe I should try an old-fashioned javascript rollover?

    Thanks in advance.

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

    You can set up as many different styles for your link as you want:

    Put this in your head or add the code to your existing stylesheet.

    Code:
    <style type="text/css" media="screen"> 
    <!-- 
    a.leftlink:link { 
    color: #0000FF; 
    background-color: #FFFFFF; 
    } 
    a.leftlink:visited { 
    color: #990000; 
    background-color: #FFFFFF; 
    } 
    etc................. 
    
    and then in the body: 
    
    <div> 
    <p><a class="leftlink" href="#">Hello</a></p> 
    <p><a class="leftlink" href="#">Goodbye</a></p> 
    <p><a class="leftlink" href="#">Hi</a></p> 
    </div>
    Or if you want to isolate blocks of links you can use this.

    Code:
     
    
    <style type="text/css" media="screen"> 
    <!-- 
    
    .rightlink a:link { 
    color: #0000FF; 
    background-color: #FFFccc; 
    } 
    .rightlink a:visited { 
    color: #990000; 
    background-color: #FFFccc; 
    } 
    
    etc.................... 
    
    and in the body: 
    
    <div class="rightlink"> 
    <p><a href="#">Hello</a></p> 
    <p><a href="#">Goodbye</a></p> 
    <p><a href="#">Hi</a></p> 
    </div>
    The point being that in the second version there is a lot less code especially if there are a lot of links as you can just set the class in the div.

    Hope this helps.

    Paul

    In the first version the class has to be put in every anchor tag.

  3. #3
    SitePoint Enthusiast that_tim_fella's Avatar
    Join Date
    Feb 2003
    Location
    England
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You made it look very easy. Thanks.


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
  •