CSS Links

Styling Links

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

Example


    
            <!DOCTYPE html>
            <html>
            <head>
            <style>
            a {
              color: hotpink;
            }
            </style>
            </head>
            <body>
            
            <h2>Style a link with a color</h2>
            
            <p><b><a href="#" target="_blank">ACADEMY OF INFORMATION TECHNOLOGY</a></b></p>
            
            </body>
            </html>

Result:

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


  
        <!DOCTYPE html>
        <html>
        <head>
        <style>
        /* unvisited link */
        a:link {
          color: red;
        }
        
        /* visited link */
        a:visited {
          color: green;
        }
        
        /* mouse over link */
        a:hover {
          color: hotpink;
        }
        
        /* selected link */
        a:active {
          color: blue;
        }
        </style>
        </head>
        <body>
        
        <h2>Styling a link depending on state</h2>
        
        <p><b><a href="#" target="_blank">This is a link</a></b></p>
      
        </body>
        </html>

Result:

Styling a link depending on state

ACADEMY OF INFORMATION TECHNOLOGY