Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

How To Use CSS to Style Link Text

There are typically three states of a link; unvisited, visited and hovered (when someone is pointing to it, but hasn't clicked yet).

Accordingly, each of those states can be easily represented using CSS and stylesheets. The simplest way to distinguish between unvisited, visited and hovered links is through changing the color of the linked text.

Changing Link Colors

To change the link colors from the default blue using CSS is as simple as the three statements listed below.

a { color: darksalmon; }
a:visited { color: cornflowerblue; }
a:hover { color: crimson; }

With those settings you would see:

unvisited link

visited link

hovered link

Notice how they are all underlined, yet my style definition did not include underlining. That is because underline is the default linkstyle.

Using Backgrounds On Links

Still keeping our example simple, let's make things a bit more interesting:

a { color: darksalmon; }
a:visited { color: cornflowerblue; }
a:hover {color: crimson; background: darksalmon; text-decoration: none; font-weight: bold; }

With those CSS styles you would see:

unvisited link

visited link

hovered link

One Page Using One Set of CSS LinkStyles

The examples shown thus far would change all links contained on a page using that style. More than likely, you will have multiple areas on the webpage where links will be displayed. Depending upon how that area is designed, you may wish to have links display differently on the same page.

Let's suppose a webpage has three main columns that are using CSS to create link color choices like those shown below:

Column 1 Column 2 Column 3

If we use the CSS link styling that we defined last, several links and backgrounds disappear.

Column 1

unvisited link

visited link

hovered link

Column 2

unvisited link

visited link

hovered link

Column 3

unvisited link

visited link

hovered link


Same Webpage, Using CSS to Create Multiple Link Styles

We could fiddle around with the link styling and the columns until we find link colors that will work with the entire page or we could create separate CSS link style definitions for each column.

There are two ways to accomplish creating multiple CSS style definitions for links, or any other element for that matter. One technique uses classes, making a link statement look like <a href="#" class="col1"> and while perhaps making the HTML code more clear, it tends to also make the HTML code longer. The other technique, the one we will discuss here makes the stylesheet do all the work as it removes the need for having the class designated from the HTML.

If each column has been defined using a DIV statement, each column could have its own set of link styles. By doing that, your link statements will not require a class=style definition and can be simply <a href="#">link</a>. The following lines of CSS code show how to designate a different set of link styles for each of the columns.

#col1 { color: cornflowerblue; background: white; }
#col1 a { color: darksalmon; }
#col1 a:visited { color: cornflowerblue; }
#col1 a:hover {color: white; background: cornflowerblue; text-decoration: none; font-weight: bold; }
#col2 { color: white; background: cornflowerblue; }
#col2 a { color: darksalmon; }
#col2 a:visited { color: white; }
#col2 a:hover {color: darksalmon; background: white; text-decoration: none; font-weight: bold; }
#col3 { color: white; background: darksalmon; }
#col3 a { color: cornflowerblue; }
#col3 a:visited { color: white; }
#col3 a:hover {color: darksalmon; background: white url(images/back.jpg) left repeat; text-decoration: none; font-weight: bold; }

Column 1

unvisited link

visited link

hovered link

Column 2

unvisited link

visited link

hovered link

Column 3

unvisited link

visited link

hovered link


Did you notice the background on the hovered link in Column 3? Just like any other element, you can use CSS to define an image for the link background. Using an image this way can also lead to Java like designs that rely entirely on CSS.

This is just the beginning to what you can do with linkstyles and CSS. Once you get familiar with this technique, there are many online resources to creating much more sophisticated effects.


Format the Text Appearance of Your Links


Learn how to format how text appears on the screen to create different link text styles with Help For Web Beginner's two part series on CSS and Text Formatting.

Part I:  Font Size and Family

Part II:  Font Style, Variant and Weight

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.