Grow your CSS skills. Land your dream job.

Link Styling

  • # February 26, 2009 at 10:24 pm

    I am currently working on a project at work where everything is being done locally so I don’t have a link to provide.

    Here’s my query.

    For instance I have created rules in my stylesheet to where I want to style certain text links one way within say
    #maincontent

    #maincontent a {
    color: #000;
    text-decoration: underline;
    }

    #maincontent a:hover {
    color: #000;
    text-decoration: none;
    }

    But then there may be some other links that I would like to possibly style in another manner that also reside within that #maincontent – maybe in another div inside that main one. I know right now I have some thumbnails of images which are linked to larger ones and you can see the text-decoration rule showing on those with an underline rather than nothing. That rule I referenced above seems to override everything.

    Any help understanding how to style links differently within the same div would be helpful.

    Thanks

    # February 26, 2009 at 11:45 pm
    Code:
    #maincontent a.nodec {
    text-decoration:none;
    any-other-styles: boom;
    }
    Code:
    # February 27, 2009 at 6:53 am

    thanks Doc.

    what would be the best way to ‘turn off’ text-decoration in the case of images on a page that are linked to larger ones that are in that #mainContent? right now all these thumbs show a 1px dotted #000 border beneath them hence this is the way most of the text links are styled in that div.

    thanks

    i tried what you suggested yesterday yet placed ‘class’ somewhere obviously not right.

    # February 27, 2009 at 2:09 pm

    I’m not sure how that first one wouldn’t work. For images, you can put something like:

    Code:
    img, img a {
    text-decoration:none;
    }

    But if that first one didn’t work, maybe there is an error somewhere in the CSS. It’s tough to say without seeing the code.

    # March 5, 2009 at 3:18 pm

    Two ways you can do this.

    One way is to set up a default style for all links, and then when you want different styles for certain links, assign them a specific class:

    Code:
    a {
    color: #666;
    text-decoration: underline;
    }

    a.different {
    color: #999;
    text-decoration: none;
    }

    Another way is to style links within certain divs differently:

    Code:
    a {
    color: #666;
    text-decoration: underline;
    }

    div.different a {
    color: #999;
    text-decoration: none;
    }

    In both cases, the "different" styles (whether a.different or div.different a) should override the "default" ones since they’re more specific.

    If you want to turn off the underline on a linked image (like a thumbnail that links to a larger version):

    Code:
    a img {
    text-decoration: none;
    }
    Code:
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".