🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

CSS Link Color Guide With Examples

Reading time 4 min
Published Jun 28, 2019
Updated Jan 23, 2020

TL;DR – Properties can add CSS link colors according to link states.

  • There are 4 link states: a:active, a:hover, a:visited, and a:link.
  • To avoid behavior overlapping, these states should go in the following order:
    • a:hover should go after a:link and a:visited.
    • a:active should go after a:hover.
  • To style link, many CSS styling properties can be applied (e.g. CSS backgrounds, CSS color, CSS font-family, CSS text decoration, etc.).

Different link states can have individual properties of link color in CSS. Developers choose to change the default style and color of URLs to make links match their web designs.

Here are the states you can change link color for with CSS:

  • a:link – unvisited.
  • a:hover – when the mouse pointer hovers over it.
  • a:active – when a user clicks the link.
  • a:visited – visited link.

In the following example, we have all four link states with different colors:

Links that have the same color as the rest of the text are more difficult to notice. You should always change the CSS link color to make it stand out.

To change link color, CSS value should be assigned to the color styling property. There are several ways to describe colors. You can use color names, RGB indicators (rgb()) or HEX indicators (#ffffff).

In the following example, a CSS link is assigned a color:

I am a link

Example
a {
    color: green;
}

Don't miss a chance to try out our new Pickeristic color scale for setting CSS link colors.

Tip: Pickeristic provides you with RGB, HSLA indicators and other codes of colors. You can create sets of colors for your project, generate colors randomly and even mix them.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Text Decoration

By default, links have underlines. To remove underline from link with CSS, use the CSS text decoration property.

It has four possible values: underline, overline, line-through, and none.

The example below makes CSS remove underline from link by adding text-decoration:none;. We set text-decoration values for each of the link states with CSS: only active and hover states have underlines:

Example
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Background Color

Besides setting link color in CSS, it is possible to add a background-color property.

I am a link

Example
a:link {
    background-color: green;
}

a:visited {
    background-color: blue;
}

a:hover {
    background-color: red;
}

a:active {
    background-color: pink;
}

The property is similar to the CSS link color. You can use the same value indicators as well.

Tip: it is common to set a background color on the hover state.

The control of the link color with CSS is not all. It is common for developers to style links as buttons (for instance, for a navigation menu of web sites).


 
Here are the CSS properties necessary for styling buttons or tabs that lead to other parts of a web site:

  • color – to set the color of the text which represents the link
  • background-color – to add colors to the button
  • padding – to determine the size of the button
  • text-decoration – to remove underline from links
  • text-align – to set the alignment of links
  • display – to describe how your link should be shown

In this example, we combine these CSS properties to display links as buttons:

Example
a:link, a:visited {
    background-color: purple;
    border: none;
    color: #FFFFFF;
    padding: 15px 32px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
   font-size: 16px;
   cursor: pointer;
   display: inline-block;
}

a:hover, a:active {
   background-color: #6D0062;
}

Additionally, you can use font-family, font-size, font-weight, or others to match your web design.

  • You can style cursors as well by adding cursor: pointer as one of the properties.
  • Choosing the link color CSS depends on the overall design of websites. Make sure that modified styles of links do not make links more difficult to find.