Changing Hyperlink Colors

This article will help you customize the Hyperlink Colors in your project. This is particularly useful if you wish to make it clear to the end user if they have already visited the link, or even just to style the link to change color when your cursor is hovering over the link.

You need to use CSS in a custom stylesheet to change the colors of hyperlinks in your project.

The four link states are:

  • a:link - a normal, unvisited link.
  • a:visited - a link the user has visited.
  • a:hover - a link when the user hovers their mouse over the link.
  • a:active - a link the moment it is clicked.

For example:

a:link {
color: red;
a:visited {
color: green;
a:hover {
color: hotpink;
a:active {
color: blue;

You can find out how to add a new stylesheet to your project here:

You can also make the above rule more specific for a certain kind of content - such as using this example for links inside the topic content:

.i-body-content a:hover {
color: red;

This will change all links inside of a topic to red when they are hovered over:

You can find more information on CSS for links here:



Have more questions? Submit a request


Please sign in to leave a comment.