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
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.