I've used CSS for quite a while for text and link styles on static sites, however this is the first time I've used it for CMS layout and could do with some help. I'm developing a custom theme based on the theme Foundation and I need to create separate CSS styles for the primary menu links, navigation menu links and content links.
The problem is that the Foundation style.css file only has one set of styles for all links, wherever they are on the page:
a:link { color: #C0C0C0; }
a:visited { color: #C0C0C0; }
a:active { color: #ff0000; }
a:hover { }
However, since my theme has different background colours for the primary menu, left sidebar and body, I need to have separate CSS styles. I've found classes that relate to the different sections however they seem to relate to layout:
.header .navigation .navigation-primary { }
.sidebar-left { float: left; width: 20%; height: 100%; background-color: #2462A9; padding-top: 10px; padding-left: 0px; }
I'm guessing I have to create new classes for the primary and navigation links but I'm not sure how to call these within page.tpl.php. As you can see from the code below, I've managed to create a new class called menubar for the primary menu background, however any help on how to sort out the css for the links would be greatly appreciated.