Hyperlinks can exist in four states: unvisited, visited, hover and active.
Hover is where the mouse is on top of the link but not clicking on it.
Active referes to the instance of the mouse clicking on the link.
CSS can define different styles for each of four link states. This requiers
the HTML command a (anchor command) to have more then one rule.
To do this CSS has pseudo classes. Here are examples:
a:link {font: 12px verdana, arial; color: blue; text-decoration: none; }
a:visited {font: 12px verdana, arial; color: purple; }
a:hover {font: 12px verdana, arial; color: red; text-decoration: underline;}
a:active {font: 12px verdana, arial; color: blue; text-decoration: none; }
The above link rules define the unvisited link as blue and without an underline
(text-decoration: none;). The visited links will be purple, and hovering over a
link will display its text as red and underlined. The active state displays blue.
Many webmasters not not include an active state because they are displayed
so quickly that it is not worth the concern to define the state.
Here are 3 links defined by the above link definitions:
For the next example I will use the same style definitions but will use a shortcut method.
Here is another way of writting the above style rules:
a {font: 12px verdana; color: blue; text-decoration: none;}
a:visited { color: purple;}
a:hover {color: red; text-decoration: underline;}
The rules
above first define the anchor command with properties that will be used
in the other pseudo rules: size, font and decoration. By doing this these properties
only have to be written once and then they will be inherited to the pseudo rules. The
visited rule only needs its color defined. The hover rule needs the
color and the text-decoration underline defined. The active rule is purposely
not included. I have found that shortcut link rules work most of the time.
For advanced link styling you may have to avoid the shortcut method.
Here is the code for another Link styling effect:
a:link {font: bold 14px comic sans ms; color:#CC6633; text-decoration: none; }
a:visited {font: bold 14px comic sans ms; color: green;}
a:hover {font: bold 14px comic sans ms; color:#CC6600; background-color:#CCCCFF;}
This code defines the unvisited style with bold, size 14 pixel comic sans ms font with color #cc6633.
The visisted style with the color green. And the hover style is defined with a background color.
Here are three links defined by the above link rules:
FOX NEWS
CBS NEWS
ABC NEWS
Here is a shorcut version of the same CSS rules above:
a {font: bold 14px comic sans ms; color:#CC6633; text-decoration: none; }
a:visited {color: green;}
a:hover {color:#CC6600; background-color:#CCCCFF;}
The font style is inherited from the anchor rule to the two pseudo rules.
The following is another link style example that uses the border-bottom property
to create an underlined dash style effect.
a:link {font: 16px tahoma; color: #CC3300; border-bottom: 1px dashed red;}
a:visited {font: 16px tahoma; color: #CC33FF; border-bottom: 1px dashed #CC33FF;}
a:hover {font: 16px tahoma; color: #CC3300; border-bottom: 1px dashed white;
text-decoration: none;}
The unvisited rule has the border-bottom style using a red dashed line.
The visited rule has a border-bottom style using the same color as its text.
The hover rule has a border-bottom style using a white line that blends
into the white background resulting in an appearence of no hover effect.
Here are three links using this style effect:
Disneyland
Knotts Berry Farm
Six Flags
The following is a box using background and link style properties. Its
content is about NASA:
The NASA web site is replendent
with interesting
photos and
mulitmedia content. Visit the
planets, and
stars. Learn about
current
astronomical events.
NASA
Home Page
It's link style code is:
a {font: bold 13px courrier; color: #0066FF; }
a:visited {font: bold 13px courrier; color: blue; }
a:hover {font: bold 13px courrier; color: #990000;
border-bottom: 1px dashed #990000;
text-decoration: none;}