CSS Links

      No Comments on CSS Links

With CSS Links can be styled in different ways

Styling CSS Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example:

.a_link_box
{
  background-color:red;
  padding:10px;
  color:#fff;
}

Some styled links are below:

Text Link

.a_link
{
   color:#333399;text-decoration:underline;border:solid 2px pink;padding:10px;
}
.a_link:hover
{
 color:red;border:solid 2px red;
}

text-decoration property is generally used in links to add or remove the underline for links.

Text link

.a_link2
{
  color:brown;font-weight:bolder;margin:20px;
}
.a_link2:hover
{
color:red;border:solid 1px yellow;
}

Text link

.a_link_box
{
  background-color:red;
  padding:10px;
  color:#fff;
 margin:30px;
}
.a_link_box:hover
{
  color:#000;
  background-color:yellow;
}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked
  • Example:

    Link

    <style>
    .a1:link
    {
      color:blue;
    }
    .a1:hover
    { 
      color:yellow;
    }
    .a1:active
    {
       color:red;
    }
    .a1:visited
    {
       color:blue;
    }
    </style>
    <a href='#' class='a1'>Link</a>
    

Leave a Reply

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