I'm looking to implement different colors and styles for various links on the same page using a separate CSS file. The CSS file is already linked to the page. However, despite trying multiple approaches, I've been unable to apply distinct rules to each set of links without running into issues where only some rules are applied or they get overridden by default settings.
The first set of links pertain to specific areas on the page and have unique styling requirements:
a#mainnav, #categories:link { color: grey; text-decoration: none;}
a#mainav, #categories, #header, #bottombar:visited { color: darkcyan; font-weight: normal;}
a#mainnav, #categories:focus { color: lightgrey;}
a#mainnav:hover { color: darkgrey;}
a#categories:hover { color: darkgrey; font-size: 18;}
a#mainnav, #categories:active { color: silver;}
The second set of rules should be applied to all other links on the page:
a#header, #bottombar:link { color: deepskyblue; text-decoration: none;}
a#headers, #bottombar:focus { color: darkcyan;}
a#header, #bottombar:hover { color: mediumblue;}
a#header, #bottombar:active { color: royalblue;}
Despite experimenting with different selectors like .header and #header, as well as adjusting placement within the code, I've yet to successfully assign separate styles to the intended link areas.
HTML:
<div id="container">
<div id="header" title="U BLOSH">
<h1>
<a name="index.html"</a>
<a href="#index.html"
<abbr title="You Buy Low or Sell High"</abbr>
<img src="file:///C|/Users/Marcus/Pictures/ubloshlogo.png" alt="logo" width="250" height="50";</h1>
</div>