Forums

rebelbwb

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

TheDoc

#maincontent a.nodec {
    text-decoration:none;
    any-other-styles: boom;
}

<div id=\"maincontent\">
<a class=\"nodec\" href='#\">Blah</a>
</div>

rebelbwb

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.

TheDoc

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

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.

daGUY

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:

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

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


<a href=\"#\">Default link</a>
<a href=\"#\" class=\"different\">Different link</a>

Another way is to style links within certain divs differently:


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

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

<a href=\"#\">Default link</a>
<div class=\"different\">
<a href=\"#\">Different link</a>
</div>

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):

a img {
text-decoration: none;
}

<a href=\"larger.jpg\"><img src=\"thumbnail.jpg\" /></a>

treehouse : what would you like to learn today?

Forums

Link Styling