re header linking

image has the coding to hover different colour

[quartzy]

I am new to css and I m starting a website, I have added background colour boxes to my links, but it has also colour coded the header image, so now I have a border around my header on one side that changes colour when clicked on. This is not what I want to happen, I would like the header homepage link to just be clicked on without no effects. I realise I need a class or selector but I cannot get around in my head where this selector should go, ie on the a: or the a:hover or the header. Should I add a selector to the a: coding for the header?

[Xapti]

you need to specify your situation a bit more, such as with code to get an exact answer, the the main problem is you just need to specify some more CSS information.

Your (navigation?) links style should be specified under a container with a specific class, so that only links in that container are affected. Example:
div.navigation a{border-left:2px solid red}
this means that only a elements inside the navigation div will be styled.

Another option, which is generally desired for most images anyway (assuming your header image is an image element) is to do:
a img{border:none;}

[quartzy]

I have tried a few things out but I still cannot get it to work. Here is the code.

HTML <a class="link" class="hover" class="active" href="index.html"><img border="0"
src="images/networkartslogo.gif" width="749" height="102" alt="Network Arts header/logo image"><title>Network Arts</title></a>

and the css which is hard to do as I have two navigation lists, the first one is plain ie without a div.

a {
text-decoration:none;
padding: 8px;
color:#fff;
background: #6600CC;
border: 1px solid; }

.link { background-color: #E60073;
border: 0;
}
.hover { border: 0;
}
.active { border: 0;
}
a:hover {
color:#fff;
background-color:#E60073;
border: 1px solid; }

a:active {
color:#fff;
background-color:#E60073;
border: 1px solid; }

I have set selectors but I am not sure if they will work in the HTML as they are next to each other. Also the top navigation jumps when I hover on the header, which is not quite right.

[quartzy]

It's OK now, I applied what you told me to do, though I confess it took me a while to work out what you meant and now, the links do not jump. The header does not change color, or have a border. Thank you so much

[Xapti]

don't assign multiple classes like that! it's also very confusing when you name your classes those names. There's no need to name classes for stuff like hover state when you can just use a:hover

Notice that a:hover is different than a.hover. a.hover is specifying the style for a link IN ALL IT'S STATUSES, as long as it has the .hover class assigned to it. a:hover assigns a style to the link only when it's hovered over.

Secondly, to assign multiple classes, use class="class1 class2 class3" That's it. Just separate the classes with spaces, otherwise it's possible that it will just use the last class (and it takes up more space regardless).

[quartzy]

I have fixed this problem, by assigning each navigation list to its own ID, thanks for your help.