hey all I've got small problem with my external style sheet picking the colour of my links, this is what i have on my style sheet... <style type="text/css"> a.nav:link {text-decoration: none; color: #113b5b;} a.nav:visited {text-decoration: none; color: #113b5b;} a.nav:active {text-decoration: none; color: #113b5b;} a.nav:hover {text-decoration: none; color: #b62a2b;} </style> and on my link it is as follows: - <a class="nav" href="http://www.emazegrafix.com/">Home</a> However when i upload the page to FTP and view it the link when it hasn't yet been clicked is the standard blue color and not the color i want, can someone tell me what i am doing wrong, all the other colours such as active, hover and visited show up fine! it's only before the link has been clicked it seems to be the standard blue. Please help Thanks
Wow, 2 out of 2 /FAIL/. Order makes no difference in either case, in the HTML or in the CSS - since those are TARGETED psuedoclasses. That said, the CSS is wasteful. If you are going to declare the same values, do it on the master element and not the psuedo's, then in the psuedos only declare what's DIFFERENT. You might also want to trap :active and :focus. a.nav { text-decoration:none; color: #113b5b; } a.nav:active, a.nav:focus, a.nav:hover { text-decoration:none; color:#b62a2b; } Code (markup): Though if that's not working I would suggest looking for somewhere else in your CSS where it's getting overrridden - either by an anchor before it being assigned via higher precedence like an ID, or something after. Though looking at your anchor that looks like part of a menu? In that case you probably shouldn't even waste time putting a class on it and instead target off the menu container (since a menu should be a unordered list)
That doesn't matter either-- active is when you're clicking and if you actually have a "clicking" style you want it to show whether the link was visited earlier or nor, meaning it'd have to come after :visited. However I think everyone just loves giving themselves headaches by bothering with this :link garbage. Ever hear, a good programmer is a lazy one? Be lazy. <a href="http://www.emazegrafix.com/">Home</a> (cuz I has this suspicious that every single link has the same class. Refer with the parent. <style type="text/css"> a { text-decoration: none; color: #113b5b; } a:focus, a:hover { text-decoration: none; color: #b62a2b; } </style> This is what you want. A= all links. If you only want this for links in your menu, then they'd better be in a ul, as a menu is a list of links. <ul> <li><a href="http://www.emazegrafix.com/">Home</a></li> <li><a href="http://www.emazegrafix.com/">Foo</a></li> <li><a href="http://www.emazegrafix.com/">Bar</a></li> </ul> so ul a { text-decoration: none; color: #113b5b; } Or if you have more than one list (likely) give this list a name. <ul id="mainmenu"> #mainmenu a { stuff; } But setting link and then repeating yourself with nothing different for every single other possible pseudo state (course you missed a few, I personally think :focus is damn important : ) is just making more work without even the benefit of losing weight or building character.
Having external stylesheets just provides more flexibility when designing multiple web pages. That way you can edit one detail and have it affect all of your pages. It also makes your code easily readable, I guess. Less clutter on the page. Usually I make 2 stylesheets. One goes to every page I make, which contains the info for the different elements, like a, h1-h6, and divs. The other just contains styling for the specific page I'm working on. That way the layout and styling are separated.
Thanks for everyone help i actually managed to fix this myself before reading this thread, changed my midn and decided to keep all links the same color through an external style sheet so their was no need for me to have the class="nav". Hopefully will save me a lot of headache in the future aswell. Thanks anyway