CSS Links

Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the site. By default, links have underline and blue color, even though we can modify it as it is an important aspect of building a user-friendly website.


A link has four different states — link, visited, active and hover. These four states of a link can be styled differently through using the following anchor pseudo-class selectors.

  • a:link — define styles for normal or unvisited links.
  • a:visited — define styles for links that the user has already visited.
  • a:hover — define styles for a link when the user place the mouse pointer over it.
  • a:active — define styles for links when they are being clicked.

We can specify any CSS property you’d like e.g. color, font, background, border, etc. to each of these selectors to customize the style of links, just like you do with the normal text.

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}

The order in which we are setting the style for different states of links is important, because what defines last takes precedence over the style rules defined earlier.

Note: In general, the order of the pseudo classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly

Input:-

Index.html
	
<body>
      <p> <a href="#">Lorem Ipsum</a>is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>    
</body>

Style.css
a:hover{
   color: teal;
}

Output(normal link):-

Output(normal link with hover state):-


Modifying Standard Link Styles

In all major web browsers such as Chrome, Firefox, Safari, etc. link on the web pages have underlines and uses the browser’s default link color blue, if we do not set the styles exclusively for them.

By default, text links will appear as follow in most of the browsers:

  • An unvisited link as underlined blue text.
  • A visited link as underlined purple text.
  • An active link as underlined red text.

However, there is no change in the appearance of link in case of the hover state. It remains blue, purple or red depending on which state (i.e. unvisited, visited or active) they are in.


Setting Custom Color of Links

Always use the CSS color property to define the color of your choice for different states of a link. But when choosing colors make sure that user can clearly differentiate between normal text and links within a page.

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Removing the Default Underline from Links

If we don’t like the default underline on links, we can simply use the CSS text-decoration property to get rid of it. Alternatively, we can apply other styling on links like background color, color, bottom border, bold font, etc. to make it stand out from the normal text a little better.

Input:-

Index.html
	
<body>
      <p> <a href="#">Lorem Ipsum</a>is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>    
</body>

Style.css
a {
   text-decoration: none;
}

Output:-


Making Text Links Look Like Buttons

We can also make our ordinary text links look like button using CSS. To do this we need to make use of few more CSS properties such as background-color, border, display, padding, etc.

Input:-

Index.html
	
<body>
      <p> <a href="#">Lorem Ipsum</a>is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>    
</body>

Style.css
a{
    color: #fff;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
}

Output:-