This is a link with customized color styles.
Hover your mouse over it, click it, then come back to this page. Without any special styling, most browsers display Web links as blue and underlined until you click on them. When you come back to the page, they appear in purple as "already visited" links. On this page, the colors are different. And in the menu on the right, they are different again.
Colors, underlining, font family and other attributes can be changed with CSS for just the links in one part of the page-- such as the navigation menu above. You can use different colors and attributes for all the other links on the page.
In the main content are of this page, the CSS rules only change the link text color [like this: COMS 326]. The underlining and background are the normal "defaults" for links: A transparent background and underlined links.
In the style block of the code, the four states of the anchor tags -- called "pseudo-classes" --have selectors that begin with the anchor tag, "a," followed by a colon and a word describing the condition the style applies to: link, visited, hover or active.
a:link {color:teal;} /* unvisited links are this blue-green */
a:visited {color:red;} /* already visited links will be red */
a:hover {color:gold;} /* hover the mouse over a link, it turns gold */
a:active {color:orange;} /* click the link, it turns orange */
In contrast, the links in my menu box (a div, styled as a class I've called "nav") have different CSS rules to demonstrate a few of things you can change with CSS.
For a navigation menu, it's common practice to have unvisited and visited links look the same, but add some effects to their "hover" and "active" states. Lately, many sites are also styling a "focus" state -- for people who navigate pages with keyboard's "tab" key instead of a mouse. Changing background colors, text colors or decoration in response to mouse or keyboard actions makes a menu "interactive." For this demonstration, I've included some changes that I probably wouldn't use in a real menu, just to show they can be done: a "text-transform" to uppercase letters and a "line-through" effect on active links.
You can make some settings for all five link states at once. To do that, put all of the selectors on one line, like this.
div.nav a:link, div.nav a:visited, div.nav a:hover,
div.nav a:focus, div.nav a:active
{
font-family: Arial, Helvetica, sans-serif;
display: block;
width: 100%;
}
That sets the "font-family" to a sharp-edged sans-serif type, which is especially good for menus. It sets each link area to display as a "block," so background colors will extend the full width of the line of type, and sets the with of the anchor to be the same as the width of the div containing it. Many Dreamweaver page layouts use this technique. Menus also may also include changes in text or background colors.
To add the "interactive" changes, a separate style "class" selector is used for each of the four link states, and it is preceded by the class name "div.nav" like this:
div.nav a:link /* unvisited link in the division called nav*/
{
color:#F00;
text-decoration:none;
text-transform:uppercase;
}
div.nav a:visited /* visited link in the division called nav*/
{
color: #093;
}
div.nav a:hover /* mouse over link in the division called nav*/
{
color:#00F;
text-decoration:underline;
text-transform:uppercase;
background-color:gold;
}
div.nav a:focus /* tab to a link in the division called nav */
{ /* for keyboard-navigation with tab key */
color:#00F;
text-decoration:underline;
text-transform:uppercase;
background-color:gold;
}
div.nav a:active /* selected link in the division called nav*/
{
color:#F0F;
text-decoration:line-through;
text-transform:lowercase;
}
NOTE: A common way to organize links into a menu is to make them an Unordered List (UL), and use CSS styling to remove the list bullets and indentation.
Here's my demo of the list-as-menu technique.
In other courses you may have used Flash or Javascript to make interesting menus, but as you see here, CSS can do a lot on its own.
Try hovering the mouse over the links in the box, then clicking the links and coming back to this page. Compare the behavior of the other links on this page, then use "View Source" to inspect the page's style sheet to see what makes the boxed links different.
If this has been too much at once, experiment with the w3schools page css: link pseudo-class for a simple demo of the codes for "link," "visited," "hover" and "active," including the importance of defining them in that order. The site "cssbasics.com" also has a good analysis of CSS techniques for modifying link anchors.
A demo page for COMS 326 with Bob Stepno