CSS question...

admin

Administrator
Staff member
Is it possible to allow some links to use CSS but not allow other links? For instance...I have a menu on my site that uses CSS but the background of another table is different than the background of the menu...so my links in the table have the wrong background color. Is it possible to "turn off" CSS for certain links?<br />
<br />
-Brad<!--content-->Not turn off CSS perse but how about turning it on at certain instances?<br />
<br />
Create a "class" and then apply it to your desired links that you want to use it.<br />
<br />
~~~~~<br />
<br />
a.foo {text-decoration:none;}<br />
a.hover {text-decoration:underline;}<br />
<br />
~~~~~<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"somepage.html" class="foo"> Affected link </a><br />
<a href=http://www.htmlforums.com/archive/index.php/"otherpage.html"> non-affected link </a><br />
<br />
Clear as mud?<br />
:)<!--content-->here is what I have on my site...<br />
<br />
<STYLE type="text/css"> <br />
<br />
a:link {text-decoration: none; background : #FFFFFF;} <br />
a:visited {text-decoration : none; background : #FFFFFF;} <br />
a:hover {color: white; background : #999966} <br />
a:active {text-decoration: none; background : #FFFFFF;} <br />
<br />
</style><br />
<br />
How do I create and use the class without all the links being affected like they are now? Is there a difference between "a:foo" and "a.foo"?...mine have colons, you used a period. Basically, how would I set it up so all the links aren't affected and I can pick and choose my styles?<!--content-->the a:hover for instance is not a class, it will affect all links. but if you make it a.new:hover it is a class<br />
<br />
so this one will be affected by a:hover<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"mysite.com">link</a><br />
<br />
and then this one will only be affected by the class<br />
<br />
<a class="new" href=http://www.htmlforums.com/archive/index.php/"mysite.com">link</a><br />
<br />
by the way, you can make new anything you wanted.<br />
<br />
a.mine:hover, a.your:hover etc...<br />
<br />
boy hope I got that right :D<!--content-->Doh! I mis-typed that example...<br />
<br />
a.hover {text-decoration:underline;} <br />
should be<br />
a.foo:hover {text-decoration:underline;}<br />
<br />
so other ones would be :<br />
a.foo:link {styles here}<br />
a.foo:alink {styles here}<br />
a.foo:vlink {styles here}<br />
<br />
THEN the class in the link should work now that I've fixed the example, LOL.<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"blah.html" class="foo"> this is a foo style link </a><br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"blah2.html"> non-foo link </a><br />
<br />
( you can use anything other name besides the word "foo" too. i used that for the example. )<br />
<br />
Of course you can still have your regular styles set for links so they will affect the other links on the page normally. So the choice to make would be to foo the links in the menu area or main area?<!--content-->I normally like to scpe the links to reduce coding:<br />
<br />
<style><br />
a:link {text-decoration: none; background : #FFFFFF;} <br />
a:visited {text-decoration : none; background : #FFFFFF;} <br />
a:hover {color: white; background : #999966} <br />
a:active {text-decoration: none; background : #FFFFFF;} <br />
.other a:link {text-decoration: none; background : #cccccc;} <br />
.other a:visited {text-decoration : none; background : #cccccc;} <br />
.other a:hover {color: white; background : #333333} <br />
.other a:active {text-decoration: none; background : #cccccc;} <br />
</style><br />
<br />
Then I don't have to apply the class to every link, just to a container<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"url>x</a><br />
<span class="other"><br />
<a href=http://www.htmlforums.com/archive/index.php/"url>x</a><br />
<a href=http://www.htmlforums.com/archive/index.php/"url>x</a><br />
<a href=http://www.htmlforums.com/archive/index.php/"url>x</a><br />
</span><br />
<a href=http://www.htmlforums.com/archive/index.php/"url>x</a><br />
<br />
The first and fifth link use the standard attributes I set in styles.<br />
<br />
The other three use the attributes for the other class I set in styles.<br />
<br />
Handy if you have several groups of links (or anything else) you want to style differently<!--content-->Good idea Cd&. Haven't thought about it that way.<!--content-->thanks - i just used this post to help me with something!<!--content-->Originally posted by gausie <br />
thanks - i just used this post to help me with something! <br />
Hi Gausie,<br />
it's nice that you found your answer by searching. You saved both your time and ours... but there's still no need to drag up three year old threads to just tell that ;)<!--content-->i didn't know they came to the beginning if they had recently been answered!<br />
<br />
:(<!--content-->
 
Back
Top