Links are usually displayed in a different color to help them stand out visually from the ordinary text on a web page. Usually, they also appear underlined. Why do both? The contrast between the link and ordinary text colors may seem clear to most people without vision issues, but for those with color blindness, the contrast may not be adequate. Therefore, the underline provides an additional visual clue to identify the text as a link. In addition, the link color may change depending on the state the link is in. There can be as many as four different colors, one for each link state as shown in the following table.
| State | Definition |
| Unvisited/ Link | This is the default state of a link when a page is first displayed, and the user has not yet clicked on it. |
| Visited | This is the state after a link has been clicked on and the user returns to the page in the same session. By changing the color from the other links, this state helps the user know which links they previously clicked on. |
| Mouse Over/ Hover | This state changes the color of the link when the user moves the mouse over a link. It is a visual indicator that the mouse is correctly positioned to click on the link. If the link was underlined, usually hovering over the link makes the underline disappear, or vice versa. This is another indicator of the mouse position over the link. |
| Selected Link/ Active | This state occurs when the user clicks on the link. Often this state is ignored because it is only seen fleetingly as the link is executed. |
The website’s theme uses a CSS file that usually defines the colors for these four link states. While it is possible to overwrite the default link state colors by adding your own CSS to a page, I do not recommend doing this unless you are familiar with the color contrast requirements of ADA accessibility. I will cover how to do this a little later in this post. It is also possible to directly modify the color of the link text within the HTML as shown in the following example. The first expression adds a style attribute to the anchor tag to change the link text to a dark red and the font size to 30 pixels. Note that this technique uses the style attribute to include inline CSS within an HTML tag.
<a href="http://www.nueweb.org" style="font-size:30px; color:darkred;">NueWeb Site</a>
You can achieve a similar effect by placing the inline CSS within a paragraph tag that nests the link text:
<a href="http://www.nueweb.org"><p style="font-size:30px; color:darkred;">NueWeb Site</p></a>
You can even control the underline property from the style attribute inside the anchor tag.
<a href="http://www.nueweb.org" style="text-decoration: none;">NueWeb Site</a>
While these expressions are possible, remember that just because something is possible does not make it a good practice for your web page or website. In the first two cases, the expression changes the color of just the one link where the style attribute has been added. You need to add the same style attribute to each link on the page to color all links dark red. Furthermore, this style attribute prevents the otherwise automatic changes to the link color based on the link state thus removing some of the visual functionality of links as previously discussed. Similarly, the third option removes the underscore without changing the default link colors based on the link state. I have seen cases where the home page of a website consists mostly, if not entirely, of links to other pages/documents. In that case, the web editor removes the link underline which may be distracting as there is no need to separate regular content text from links if the page is all links. While there may be some cases where using inline CSS may be necessary, in general, I strongly advise against using inline CSS to customize your link color or appearance primarily because of consistency issues that arise as others edit the page.
A better technique to ensure that all links on a page are treated the same way is to place the CSS in the page <head> section or even to use a link reference to a separate file that contains only the CSS you want to use to overwrite the theme defaults. The following shows a sample of CSS code that controls both the colors used by the links and whether the underline appears in each link state.
<head> <title>Title of the document</title> <style> a { text-decoration: none; } a:link { color: #cc0000; border-bottom: none; } a:visited { color: #00cc00; border-bottom: 1px solid #00cc00; } a:hover { color: #0000ff; border-bottom: 1px solid #0000ff; } </style> </head>
Of course, to provide consistency across your site, you would have to insert this code in the <head> section of every page on your website. One way to simplify this requirement is to use the <link> attribute inside the <head> section to reference a separate CSS text file on the webserver as shown in the following code:
<head> <link rel="stylesheet" type="text/css" href="MyNueStyle.css"> </head>
In this code snippet, the file containing my CSS code appears in a standard text file named MyNueStyle.css located in the same folder as the home page of my website. It includes all the code found in the <style> section of the previous code example. The clear advantage of this method is that I only create the CSS code once and place it in one file. If I want to change the CSS, I only need to edit one file, not dozens of web pages to change the link formatting on all my site pages.
Other link formatting variations that I have seen include the use of different font types (Arial vs Times Roman vs Calibri) or font style (bold, italic, etc.). Again, I am not a fan of these changes when displaying links. However, no matter what style or color you use to display links on your site, your prime concern should be consistency. Furthermore, your link style should NEVER be used for ordinary content text. For example, if you underline link text, then you should not underline other text within your content that is not part of a link. Often people underline section headers or words they want to emphasize. If they also underline links, this can confuse the user who may try to click on the underlined text and not understand why the content focus does not change. This is true even if the text color for the link text and that of the ordinary text are different. I will discuss formatting section headers in a later post. As far as emphasizing non-link text within a paragraph, try to use alternatives such as capital letters, bold or italic text instead. Never capitalize more than a word or two because the Internet views capitalization as equivalent to shouting.
WARNING: If you are coding your pages in HTML directly, use the <strong>strong tags</strong> instead of <b>bold tags</b>. Similarly use <em>emphasized tags</em> rather than <i>italic tags</i>. In HTML5, the <b> and <i> tags both confer a style but apply no additional meaning to the text. Thus, screen readers ignore them when reading the text to a user. On the other hand, both <strong> and <em> not only modify the visual style of the text but also provide a semantic emphasis to these words when they are read by a screen reader to the visually impaired.
The bottom line is that the more you try to decorate your text with different fonts, styles, and formatting, the more your page looks like a carnival advertisement (unless of course, your page really is a carnival advertisement). Usually, the default formatting of links is perfect the way it is. If you really need different colors, check with your web hosting service to see if the CSS can be modified to modify the link colors rather than making manual changes to each link. Keep your page formatting simple to help all site visitors. Formating links consistently throughout your website is one step in that process and it is less work for you.
NUEWeb 