Trouble with links style

I am building a web site from scratch and I haven't done it for almost a year so I need a refresher. I've been fighting with link styles for couple days now, and still did not achieve desired result.

Pretty much I am trying to have different style links for the menu bar and there rest of the website, but once link is clicked it changes style to the style of my menu bar :mad:

http://76.115.57.103/index.php <-- click on one of the links on the right side under pictures (Facebook or Flickr link) and see yourself. When you go back to that page those two links will look like menu bar.

Related CSS:

.sidebar a:link, a:active, a:visited, a:hover {
font-size: 100%;
color: #5A8EC6;
text-decoration: none;
font-family: Tahoma;
font-weight: normal;
background-color: white;
}

.menu a:link, a:active, a:visited {
color: white;
font-family: Tahoma;
font-size: 7pt;
font-weight: bold;
border-right: 1px solid white;
text-decoration: none;
background-color: #313031;
padding: 5px;
}
.menu a:hover {
background-color: #5A8EC6;
}


Menu bar HTML:
<div id="logo"></div>
<div id="menu">
<span class="menu">
<a href="/../index.php">Home</a>
<a href="/../blog/index.php">Blog</a>
<a href="/../event/index.php">Upcoming Events</a>
<a href="/../store/index.php">Store</a>
<a href="/../about/index.php">About</a>
<a href="/../contacts/index.php">Contacts</a>
</span>
</div>

Sidebar HTML:
<img src="/../images/content/store_coming.jpg" alt="503 Store is coming" /><br />
<img src="/../images/content/event_coming.jpg" alt="Event calendar is coming" /><br />

<span class="sidebar">
<a href="http://www.facebook.com/#!/group.php?gid=120272964680763">Facebook</a> | <a href="http://www.flickr.com/photos/TeamPlayerCo">Flickr</a><br />
</span>


Thx in Advance.

I’ve only had a glimpse at the CSS you posted here and I noticed one thing:



.sidebar a:link, a:active, a:visited, a:hover {
font-size: 100%;
color: #5A8EC6;
text-decoration: none;
font-family: Tahoma;
font-weight: normal;
background-color: white;
}

.menu a:link, a:active, a:visited {
color: white;
font-family: Tahoma;
font-size: 7pt;
font-weight: bold;
border-right: 1px solid white;
text-decoration: none;
background-color: #313031;
padding: 5px;
}
.menu a:hover {
background-color: #5A8EC6;
}



If you want the styles to apply to a specific element you need to use the specific selector throughout:

.sidebar a:link, .sidebar a:active, .sidebar a:visited, .sidebar a:hover {…}

(same for the menu CSS)

However, if you want all link states to have the same styles anyway you could just write .sidebar a {…}. This will apply to link, visited, hover, active, and focus pseudo classes altogehter.

I’ve only had a glimpse at the CSS you posted here and I noticed one thing:



If you want the styles to apply to a specific element you need to use the specific selector throughout:

.sidebar a:link, .sidebar a:active, .sidebar a:visited, .sidebar a:hover {…}

(same for the menu CSS)

However, if you want all link states to have the same styles anyway you could just write .sidebar a {…}. This will apply to link, visited, hover, active, and focus pseudo classes altogehter.
I want my menu to change bakcground color on mouse over. Other that menu I want different stlye links. However they somehow mix. After I click link that is not part of my menu bar it changes stlye and looks like my menu bar. Not sure if it make sence.

Thanks for info, I'll look into that.

I am building a web site from scratch
Off topic: I'd recommend you to read the following articles if you haven't read it before.

http://boagworld.com/technology/semantic-code-what-why-how
http://csscreator.com/divitis

Off topic: I'd recommend you to read the following articles if you haven't read it before.

http://boagworld.com/technology/semantic-code-what-why-how
http://csscreator.com/divitis

Thanks for info, I'll read those when I have time.

Problem is still unresolved. I am sure it's an easy fix, but I just can't understand what am I doing wrong.

Problem is still unresolved. I am sure it's an easy fix, but I just can't understand what am I doing wrong.
VIPS has already given the solution.
If you want the styles to apply to a specific element you need to use the specific selector throughout:

.sidebar a:link, .sidebar a:active, .sidebar a:visited, .sidebar a:hover {…}

(same for the menu CSS)

.sidebar a:link, a:active, a:visited, a:hover
The above highlighted snipper in your CSS is getting applied on all the anchors. You need to make them specific (http://www.htmldog.com/guides/cssadvanced/specificity/) as given by VIPS.