CSS Links

CSS Links

Links are an essential part of any website, allowing visitors to navigate the site. Therefore, styling the links is an important thing in building a user-friendly and good-looking website.

A link has four different stages –

  • è Link
  • è Visited
  • è Active
  • è Hover

These are some different stages of links in CSS.

  • ð link – it uses for unvisited links.
  • ð visited – if a user has already visited, then we use this style.
  • ð hover – when a user puts the mouse pointer, there we use this style.
  • ð active – it uses where the link is clicked.
  • ð focus – It defines as a link that has focus.

Let’s take some examples of it –

Ex 1 –


/* unvisited link */

.stylestate:link {

color: dark red;


/* visited link */

.stylestate:visited {

color: blue;



/* mouse over link */

.stylestate:hover {

color: orangered;

background-color: lightblue;



/* selected link */

.stylestate:active {

color: darkgreen;



/* focused link */

.stylestate:focus {

color: darkgreen;




<a href=”https://flipkart.com”





(Note – the text written in between ” /* and

*/ ” are comments. They don’t execute as codes)

Removing the Default Underline from Links

When we want to decorate a text or sentence, we can do it with the help of the decoration property of CSS. We can put underline; we can remove the default underline, etc. Ex –

a:link, a:visited


text-decoration: none;


a:hover, a:active


text-decoration: underline;


Disabling links

A link can be disabled or enabled. When the link is enabled, if we click on that link, it will take us to a new page that was assigned with that link. But when the link is disabled, if we click on that, nothing will happen.

Ex –

<!DOCTYPE html>



<title>Disable a Link in CSS</title>


.disabled {

pointer-events: none;

cursor: default;






<b>Disabled link:</b> Click here <a href=”https://www.includehelp.com/” class=”disabled”>IncludeHelp</a>



<b>Enabled link:</b> visit our wesbite

<a href=”https://www.includehelp.com/”> IncludeHelp</a>



Leave a Reply

Your email address will not be published. Required fields are marked *