Why won't my hyperlinks change color? - html

Question

I'm an elderly college student (no kidding!) taking HTML2 now and I figure I've probably missed or mis-coded something in my CSS. But for the life of me, I can't figure out the issue after many attempts/re-try's at locating where the problem lies.
Here's what's wrong...
Hyperlinks normally use "link" in CSS (as in, an untouched link on the page in blue color), "hover" (for when the mouse is over it, call it white color), and "visited" (for after the link has been clicked on, call it purple color). I have 5 pages to link to in my Nav bar. All the links take you to the proper pages, but aren't visually reacting to the mouse or hover AND none of the 5 links are changing color AFTER being visited.
As stated, I've tried many different things but nothing has changed.
Any and all suggestions are greatly appreciated. And keep up the good work that you guys do when helping someone else out of their problem.
PS: This is a HW assignment which I have to validate via http://validator.w3.org/ (and the CSS as well) so solutions have to follow the acceptable guidelines of W3.
Here's my entire CSS (just in case I've written something conflicting in it that could be the issue):
/* Body config */
body { background-color: #000000;
background-image: url(images/Sunset1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding-top: 10px;
font-family: Verdana, Arial, sans-serif;}
/* Heading 1 Style */
h1 { background-position: right;
background-repeat: no-repeat;
padding-left: 20px;
height: 14px;
color: #754719;
font-family: Georgia, serif;
line-height: 120%;}
/* Heading 2 Style for Content heading */
h2 { color: #663311;
font-family: Georgia, serif;}
/* Heading 3 Style */
h3 { color: #000033;}
/* Heading 4 Style */
h4 { color: #ffff00;}
/* Definition List */
dl { margin-left: 340px;}
/* Definition Term */
dt { color: #000033;}
/* Config nav */
#nav { height: 45px;
font-family: Verdana;
font-size: 25px;
line-height: 42px;
background: #DCCAA6;
word-spacing: 2em;
padding-left: 30px;
margin-left: auto; /* Shouldn't these margin-auto lines take care of */
margin-right: auto; /* centering the NavBar without using text-align:center? */
text-align:center;} /* I tried it without text-align but it wouldn't center it */
/* All 3 "nav" lines below (commented out), didn't work. It was recommended at: http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/ */
/*.nav{
border:5px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}*/
/* Config nav hyperlinks */
#nav a { text-decoration: none;}
/* Config nav hyperlinks Pseudo-class */
#nav a:link { color: #e60000;}
#nav a:hover { color: #FFFFFF;}
#nav a:visited { color: #663300;}
/* Config nav unordered list */
#nav ul { list-style-type: none;
margin: 0;
padding-left: 0;}
/* Banner config */
img.displayed { display: block;
margin-left: auto;
margin-right: auto;}
/* Bold Resort Name for span*/
.resort { color: #000033;
font-size: 1.2em;}
/* Config content */
#content { background-color: #ffffff;
margin-top: 0;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 20px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;}
/* Config images */
#content img, #content video, #content embed { float: left;
padding-right: 20px;}
/* Gallery config */
#gallery { position: relative;}
#gallery ul { list-style-type: none;
width: 300px;}
#gallery li { display: inline;
float: left;
padding: 10px;}
#gallery img { border-style: none;
float: none;}
#gallery a { text-decoration: none;
font-style: italic;
color: #333;}
#gallery span { display: none;}
#gallery a:hover span { display: block;
position: absolute;
top: 10px;
left: 340px;
text-align: center;}
/* Clear float */
.clear { clear: left;
text-align: center;
color: #3D1F00;
background-color: #ffffff;
font-family: Comic Sans MS, cursive, sans-serif;}
/* Config unordered lists */
#content ul { list-style-position: inside;}
/* Footer */
#footer { font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
clear: both;}
/* Config for page wrapper */
#wrapper { background-color: #E6532E;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
min-width: 960px;
-webkit-box-shadow: 5px 5px 5px #828282;
-moz-box-shadow: 5px 5px 5px #828282;
box-shadow: 10px 10px 40px #995c00;
width: 75%;
margin-left: auto;
margin-right: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#1e1e1e')";}
/* Config table */
table { border: 1px solid #3399cc;
border-spacing: 0;
margin: auto;
width: 600px;}
td, th { border: 1px solid #3399cc;
padding: 5px;}
/* Config table content */
td { text-align: center;}
/* Config class */
.text { text-align: left;}
/* Config alternate row color (pseudo-class) */
tr:nth-of-type(even) { background-color: #f5fafc;}
/* Form controls */
label { float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 20px;}
/* Form input */
input, textarea { display: block;
margin-bottom: 20px;}
/* Submit button */
#mySubmit { margin-left: 130px;}
form { padding-bottom: 30px;}
Update:
It makes all the sense in the world to include the HTML. Sorry, I just wasn't sure what or how much info I could include since my original posting was HERE in StackOverflow but it kept throwing error messages so I rerouted it to WebMasters. Thanks again for any help you guys can offer. I'm pasting the HTML below the CSS. And I did correct the error someone noticed in the order for link,visited, and hover.
<!DOCTYPE html>
<!-- CIS233DA - Section# 11491 -->
<html lang="en">
<head>
<title>Sand and Surf : Home</title>
<meta name="viewport" content="width=device-width">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="description" content="Sand and Surf Island Vacations, have Award-winning accommodations specializing in romantic getaways, fun-filled honeymoons, memorable anniversaries, and the most unique vacation of a lifetime.">
<meta name="keywords" content="Award winning resort, unique, romantic, getaways, beaches, sunsets, star filled skies, secluded, couples, relaxing, fun-filled, vacation, honeymoon, anniversary, world wide, savings">
<!-- CSS connection to all pages that include this line -->
<link href="sand.css" rel="stylesheet" type="text/css">
<!-- Begin Site Logo/Banner -->
<img class="displayed" src="images/SSLogoBanner.gif" alt="Sand & Surf Logo Banner"/>
</head>
<!-- "Footprints in sand w bright light" (part of Logo/Banner) used without permission from - http://ditchthesad.com/blog/ By: Jen Herlevi -->
<!-- End Site Logo/Banner -->
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Nav Bar -->
<div id="nav">
Home
Destinations
Vacation_Packages
Contact_Us
Design
</div>
<!-- End Nav Bar -->
<!-- Begin content -->
<div id="content">
<!-- Media Controls -->
<video controls="controls" poster="snorkeling_poster.jpg" width="420" height="340">
<source src="Snorkeling.mp4" type="video/mp4">
<embed type="application/x-shockwave-flash" src="Snorkeling.mp4" quality="high" width="320" height="240" title="Sand and Surf Island Vacations">
</video>
<!-- END Media Controls -->
<br>
<br>
<p><span class="resort">Sand and Surf Island Vacations</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div class="clear"><hr>
<p>Sand and Surf, 12345 N. Sand and Surf Blvd., San Diego, CA. 95555<br>800.555.1234</p>
</div><hr>
<!-- Begin footer -->
<div id="footer">Copyright © 2014 Sand and Surf Island Vacations, L.L.C. All rights reserved<br>
Contact Webmaster
</div>
<!-- End footer -->
<!-- Icon for CSS Validation -->
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
</p>
<!-- Icon for W3/Badge Builder Validation -->
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" width="133" height="64" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling">
</div>
<!-- End Content -->
</div>
<!-- End Wrapper -->
</body>
</html>

Answer 1

It would help if you included the HTML as well, that way we can see if css is targeting the correct links, etc.
I would say though first try holding ctrl-F5, this will force a browser refresh which will cause it to reload your css encase it using a older css that may not have any revisions you've made.
Next make sure the css is included correctly in the link tag in the header.
Next make sure the css is targeting the correct id,class etc.., just test this by changing the color or something just to make sure.
Definitly include the html though since that would help a a lot in identifying the problem

Answer 2

I took a quick look at your CSS. There is no specification for changing link hover colors except for within a div or something where id= is either nav or gallery. I tested your nav specs and it works for me. For links in general, you will need an a:hover without .nav or #nav which would require a div or something with an id= or class=.
Was that clear? Just create an a:hover without a class or id for links in general.
I should add that some browsers help with this stuff. Chrome for example, has it's developer tools which is what I used to test your CSS and use all the time. If you do not have Chrome installed, I would suggest it unless your browser has this feature.