Overriding CSS styles for specific links on a particular page

I am building a web site using Dreamweaver CS3. I am using a grid of small photos as a navigational tool on a few pages. For aesthetic reasons, I don't want any link highlighting on these linked photos -- no link, visited, active or hover highlighting. I have a fade-in and fade-out behavior assigned to each linked photo and that's the only thing I want to change visually when the mouse passes over the images.

The link highlighting is controlled globally by a CSS style sheet. Is there a way to override the CSS link styles and apply no link styles to specific links on a specific page, while leaving the other links on that page unchanged (i.e., controlled by the CSS style sheet)?
don0donAsked:
Who is Participating?
 
level9wizardConnect With a Mentor Commented:
Hah, had that backwards and typo'd - sorry about that. Here's a full working example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test </title>
 
	<style type="text/css">
	a.custom
	{
		 text-decoration: none;
		 border: none;
		 /* any other customizations to that link here you want to override the global/default*/
	}
	</style>
</head>
<body>
	<a href="page.html" class="custom">Sample</a>
</body>
</html>

Open in new window

0
 
level9wizardCommented:
You can manage that link with it's own css class. For example

/*  THE CSS */
<a href="page.html" class="custom"><img src="" alt="" /></a>


<!-- THE HTML -->
a.cusotm
{
     text-decoration: none;
     border: none;
}
0
 
don0donAuthor Commented:
I hope you'll forgive a newbie question, bit regarding the /* THE CSS */ part of your instructions: would I need to add a separate class for each image on each page that I want to exclude from the global CSS formatting? In other words, here would be a separate <a href> statement for each image, pointing to the page name and the <img src> of each image?
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
David S.Commented:
You would only need to use different classes if you wanted some of the styles to be different. Multiple elements may belong to the same class and an element may belong to multiple classes. The [X]HTML class attribute's value may be a space separated list of classes.

IDs, on the other hand, should be unique. In other words, two elements in the same document may not have the same ID.
0
 
don0donAuthor Commented:
OK.

I've added this to the top of the page, at the bottom of the HEAD section:

     <!-- CSS CUSTOM CLASS -->
             <style type="text/css">
             a.custom
             {
                      text-decoration: none;
                      border: none;
             }
             </style>

     </head>

... and I've added class="custom" to each of the <a href> statements, immediately after the page link (see the code snippet).

Doesn't work ... the linked images still have borders around them.

Obviously, I'm doing something wrong.

Sorry to be such a bonehead about this ...



        <td width="188"><a href="Billboards_Banners.htm" class="custom" target="_blank"><img src="picts/Cat_Bill_Bann.jpg" title="Billboards & Banners" width="188" height="125" onMouseOut="MM_effectAppearFade(this, 1000, 50, 100, false)" onMouseOver="MM_effectAppearFade(this, 1000, 100, 50, false)"></a></td>

Open in new window

0
 
David S.Connect With a Mentor Commented:
No, you did what was suggested. Actually the border is applied to the <img>, not the <a>. You can use the comma to make the rule apply to <a> elements that belong to the "custom" class and <img> elements that are descendants of such an element.
             <style type="text/css">
             a.custom, a.custom img
             {
                      text-decoration: none;
                      border: none;
             }
             </style>

Open in new window

0
 
qwerty021600Commented:
a.custom img, img
             {
                      text-decoration: none;
                      border: 0;
             }
0
 
don0donAuthor Commented:
I split the points because level9wizard was on the right track and Kravimir's tweak took it all the way to success. Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.