Styling Links to Look Better

Links should stand out from the rest of your page. This is why they look different by default, than the rest of the text. However, standard style links are usually boring, and rarely fit into the theme of the site.

Modify the Anchor Tag

To modify a anchor tag, edit the a tag in CSS.

Common elements to change:

• Color - so it stands out
• Text-Decoration - to turn on or off the underline
• Font (Size, Family, Weight) - so that the link is more prominent.

a {
color: #C8A064;
font-weight: bold;
} /* settings for http://access2learn.com/teach/scc/ */

However, when modifying, you also cannot forget the common pseudo-classes that modify an anchor tag.

• :visited - what the link looks like when someone has visited the page a:visited { }
• :hover - what the link looks like when the mouse cursor is over the link a:hover { }
• :active - what the link looks like after someone clicks on it, but before the new page loads a:active { }

NOTE: Don't make any changes that would change the size of your link when applying the pseudo-classes, as it will cause your text to move.

Anchor Tags in Navigation Menus

To modify a link inside a navigation menu, be more specific with your rule. i.e.

#menu a {
}

This lets you specify which anchor tags to modify, instead of all of them.

Inside of navigation menu you will normally modify some additional CSS properties, such as:

• background (color, image url, etc),
• color,
• border,
• font (size, weight, family),
• padding & margin
• etc.

#menu a, #menu a:visited {
text-decoration: none;
width: 170px;
line-height: 33px;
height: 100%;
padding: 9px 10px;
color: #FFF;
letter-spacing: .1em;
font-weight: bold;
background: url(../images/button-normal-bg.gif) repeat-x center;
margin: 5px 5px 0;
}

Notice that the regular link and the visited version of the link get the same rules. This is due to placing both selectors before the rules { } and seperating them by a comma.

NOTE: Hover states are real important with menu navigation. However, you only need to include the rules that change in your hover pseudo selector.

#menu a:hover {
color: #000;
background: #BECEDE url(../images/button-over-bg.gif) repeat-x center;
}

Creating Special Links

Sometimes you will need to create a special link. Either one to similate a button, or make it stand out (like for a call to action i.e. Order Now!!!)

In these cases, use a class to apply to the link. Pseduo-classes follow the class name. e.g.:

a.button { }

- and -

a.button:hover { }