Change Color of Links

Have you ever wanted to change the color of links in a website, but ran into trouble? Our guide here serves to shed light on the process of changing the color of links using CSS or Cascading Style Sheets. The nature of all links are all styled in the same way on all websites. Links follow a hierarchy structure when it comes to CSS, and it is important to follow this order or the results may not be desirable.

To change color of links on your website, find the CSS style sheet and open it up. We are going to add the following piece of code that has to be added in the following order:

a:link {color: blue;}

a:visited {color: purple;}

a:hover {color: red;}

a:active {color: yellow;}

You can change the colors of the different actions easily by changing out the color names, preferably with hex codes.

The “link” CSS style is the base color of a link that has not taken any action yet. This must come first in the CSS style sheet. “Visited” is for links that the visitor has clicked on. This will help the visitor distinguish between links he or she has visited and those left to explore. Use this option sparingly. “Visited” must come second in the CSS style sheet line up.

Next is “hover” which is related to a hover over action of the mouse on top of the link. Changing the color to a more distinguishable, usually darker color makes good use of the “hover” CSS style selector. “Hover” must come third in the CSS style sheet line up.

Finally, is “active” is the state upon which the link has just been clicked on and is about to send the visitor to the requested location. Uses for this CSS selector can be bright colors that reward the user for clicking by satisfying their desire to have something occur when they tap on your link. “Active” must occur at the end of the CSS style sheet list of psuedo-classes.

BONUS:

For even better accessibility, add in the following piece of code in under the “hover” option to allow keyboard only users that are not using a mouse to see the same functionality as mouse users would when “hovering” or keying over to a selected link item.

a:focus {color: red;}

The full set of CSS pseudo-class code with the bonus is below:

a:link {color: blue;}

a:visited {color: purple;}

a:hover {color: red;}

a:focus {color: red;}

a:active {color: yellow;}

Have something to add to this article? Do so in the comments.

Written by: Jophiel Silvestrone

Jophiel Silvestrone has written 326 posts in the Tech Blog.

Jophiel grew up on a ranch in Paradise Valley, Montana near Chico Hot Springs. Working on the ranch instilled work ethic and self motivation. Filled with this drive, Jophiel started mowing the local school's yards twice a month throughout the summers, at the age of 12. He moved to Billings in 2004, where he has been deeply involved in the local business community ever since. A serial entrepreneur, Jophiel has ran multiple businesses in our local community. The first business, a janitorial and carpet cleaning company, founded in 2005, has employed over 50 locals. Moving on to the media industry, Jophiel and several partners founded Green Directory Montana in the spring of 2007. Green Directory's sustainability ranking software awarded points based on sustainable or "green" actions. These points counted towards a business's total "Green Score," which in turn ranked them against other businesses in their category and throughout the entire site. It also featured a limited edition print version distributed annually. A business acquisition allowed Jophiel to focus on new projects, and a few close business colleagues and Jophiel started Rocky Mountain Mr. & Ms. Magazine, a lifestyle publication for men and women in the Magic City. After a year and a half at the helm of RM3 Magazine, the business was purchased. He now runs a web development company SkyPoint Studios and fathers his son Jaoquin, who plays football, basketball, soccer, and is learning snowboarding from his dad. Recently, has expanded to locations in Havasu, Arizona & Vegas. SkyPoint Studios is a market leader in both Billings & Havasu and Jophiel is working on building that same level of market dominance in Vegas. Specialties: Extensive experience in online and offline business. Especially savvy at WordPress, and operate several sites, one example is the blog: skypointwebdesignbillingsmontana.com/tech-blog. Check out skypointwebdesignbillingsmontana.com for the latest projects from SkyPoint Studios.