SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem styling links using html

    I'm a little confused on this issue. I have to change the styling of some links on a site (only about 5 of them on one page) and I would prefer to do it with html instead of referencing a style sheet. I usually do anything like this using CSS but in this case (if it's possible) I would rather just style each link and be done with it.

    I would like to be able to change the color of both the normal and hover state. Also I would like for the link not to be underlined until a visitor hovers over it. Seems simple enough? I'm about to pull my hair out trying to figure this seemingly simple issue out.

    Here's the code. Any help or direction would be greatly appreciated!!

    <table border=0><tr></td> <td>
    <font face=verdana size=1><b>
    <A href=http://mylinkhere.com>link text here</a>
    </tr></td></table>

    This is what I did to get the underline removed on normal state:

    <table border=0><tr></td> <td>
    <font face=verdana size=1><b>
    <A STYLE=text-decoration:none href=http://mylinkhere.com>link text here</a>
    </tr></td></table>

    That worked for removing the underline now I just need to add color and a hover state. I feel dumb for even asking this question. It's just been a while since I dealt with pure html I think I forgot.....

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code isn't valid. Try this

    HTML
    Code:
    <div class="links">
    <a href="#">Link text</a>
    </div>
    CSS
    Code:
    .links a, .links a:link {
        color: #000000;
        text-decoration: none;
        font-weight: bold;
    }
    .links a:hover {
        color: #CC0000;
        text-decoration: underline;
    }
    You say that you'd rather do it all inline though, is there any reason why?

    As far as I'm aware it isn't possible to actually code a hover state inline but maybe someone else could advise on that? Why would you want to do that for each individual link is a strange one though.

  3. #3
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason for the inline code for each link.....

    The page that these links apply to is a static page and the owner wants the ability to change the color of any individual link (there are only 5) at any time throughout the year. If I go with style sheet I will have to have 5 different classes of link behaviors. Which isn't that big of an issue. But the owner will be the one who will be changing the colors, he knows enough about html to do it but.......

    I think it would just be easier to show the owner that one page and say, 'ok, here is link a, b, c, d, e or f, If you want to change the color of 'f' the hex code is right here next to the link code'

    I think it would be easier to explain that to him than trying to explain how CSS works and that he would have to change the link color by going to the style sheet... finding the specific style... etc.

    I am really just trying to make it easier on him in the long run. I know CSS and would have no trouble using it to style the links it's just that in this certain situation I feel that it would be better to have the style code right next to the links.

    Just a thought, could I style the hover behaviors in CSS and then have the color code on the html page next to each link?

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could put the style in the header after the link to the stylesheet css and comment it accordingly

  5. #5
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Client would rather have it in the html if at all possible. That's the word directly from his mouth. This is the only part of the site that he has been adamant about so I really hate to tell him no. But if it's not possible then I have no choice. I just find it hard to believe that it is not possible.

  6. #6
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But it's not that different from doing it in the body, it's in the HTML anyway and probably easier to read from a short style tag.

  7. #7
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Body would be fine. Could you give me a quick example as I don't think I've ever styled directly in the body.

  8. #8
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I didn't make myself clear.
    Put the styles between the head tags in this one static page, after the link to the stylesheet and comment it accordingly for your client.

    Like this:

    HTML Code:
    <head>
    <link href=your_stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .links a, .links a:link {
        /* change the color for this link here */
        color: #000000;
        text-decoration: none;
        font-weight: bold;
    }
    .links a:hover {
        /* change the hover color for this link here */
        color: #CC0000;
        text-decoration: underline;
    }
    </style>
    </head>
    You may need to add ids for the various links your client needs to change.


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
  •