CSS Links

Links in CSS

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

In addition, links can be styled differently, depending on what state they are in. The following pseudo selectors are available:

i. a: link -defines the style for normal unvisited links.
ii. a: visited -defines the style for visited links.
iii. a: hover –a link is hovered when the mouse is over it
iv. a: active -a link becomes active once you click on itg.

Usually, all these properties are kept in the header part of the HTML document.

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Example:

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html> 

Set the Color of Visited Links:

The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.

 Example:

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html> 

Change the Color of CSS Links when Mouse is over:

The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.

Example:

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html> 

Change the Color of Active CSS Links:

The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.

 Example:

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html> 

Recommended Posts:

Spread the love

Leave a Comment

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