Cascading Style Sheets for Hyperlinks
You may links appear in a wide variety of colors. Group links together to create color combinations that
match well with the color of the background of different areas of your web page.
Default Styles
HTML or ASP.NET
<a href="" />
<asp:hyperlink runat="server" />
CSS:
A:link { text-decoration: none; color: #3333cc; }
A:visited { text-decoration: none; color: #333399; }
A:hover { text-decoration: underline; color: #3333cc;}
A:active { text-decoration: none; color: #333399; }
*Remeber to put them in the correct order: "LoveHate"
In addition to setting the default styles for the links on your web page, you can
also set styles that will only be applied to a designated group of links. For example, the links on
your web page could be set to green while the links in your left side navigation menu could
be red.
To define a Contextual Selector in your .css file, use a #sign then a name to
identify the grouped style, then follow it with the html tag and the description
of the style.
Then in your html page, wrap the group of links in a div tag and give it the id name equal to the #stylename you set
in the stylesheet that defines these links. On the html page, place
all of the links into groups and wrap with a div tag and set the id property to
the style you defined.
HTML or ASP.NET
< div id="TOP_MENU" >
< a href="page1.html">< /a>
< a href="page2.html"> < /a>
< a href="page3.html">< /a>
< / div >
< div id="LEFT_MENU" >
< a href="page4.html">< /a>
< a href="page5.html"> < /a>
< a href="page6.html">< /a>
< / div>
< div id="RIGHT_MENU" >
< a href="page7.html">< /a>
< a href="page8.html"> < /a>
< a href="page9.html">< /a>
< / div >
< div id="BOTTOM_MENU" >
< a href="page10.html">< /a>
< a href="page12.html"> < /a>
< a href="page13.html">< /a>
< / div >
CSS
#TOP_MENU {background-color:silver}
#TOP_MENU a:link {color: black;}
#TOP_MENU a:visited {color: black;}
#TOP_MENU a:hover {color: red;}
#TOP_MENU a:active {color: white;}
#LEFT_MENU {background-color:red;height:500px; width:150px;}
#LEFT_MENU a:link {color: white;}
#LEFT_MENU a:visited {color: white;}
#LEFT_MENUa:hover {color: black}>
#LEFT_MENU a:active {color: blue;}
#RIGHT_MENU {background-color:white}
#RIGHT_MENU a:link {color: gray;}
#RIGHT_MENU a:visited {color: black;}
#RIGHT_MENUa:hover {color: red}
#RIGHT_MENU a:active {color: blue;}
#BOTTOM_MENU {background-color:black}
#BOTTOM_MENU a:link {color: red;}
#BOTTOM_MENU a:visited {color: red;}
#BOTTOM_MENUa:hover {color: white}
#BOTTOM_MENU a:active {color: white;}
LINKS in a LIST using a Decendent Selector
Another example would be when you want LINKS in a LIST to appear differently on
the page than LINKS on the rest of the page.
LINKS in a special Paragraph to appear Differently:
You can even choose to define a style that only applies to links in a special paragraph.
No space between the p and intro which means this style applies only to this particular
paragraph.