Home » Blog » Link styles: how to create multiple link styles using CSS

Link styles: how to create multiple link styles using CSS

As a general rule, it is easiest for the user to get acclimated to your site when all links look the same – same color, same size, underlined (or not underline), same weight, same style. However, there will be times when your design calls for the main navigation and your footer navs (for example) to be on different color backgrounds. The color you select for one may not work for the other.

In this scenario you will need to set up multiple link styles to use throughout your document.

Here’s how:

Think about the design of your site and determine which navigation style will be the main style. (Which style will be the one you use most often? Which areas of content are most likely to change?)

Once you’ve determined which style will be the main style, define that style using the basic a: link, a:visited, a:hover, a:active definitions.

To create the second style, follow this format:

a.newstylenamehere:link  { }
a.newstylenamehere:visited  { }
a.newstylenamehere:hover  { }
a.newstylenamehere:active  { }

Obviously, replace newstylenamehere with a name that means something to you. (ex: a.footer:link, a.footer:visited, a.footer:hover, a:footer:active

And define the link style within the brackets.  { }

Set up your footer links and style them by selecting the new name (in my example “footer”) from the style menu in the properties bar.

Pin It on Pinterest