HTML change link color using CSS style

Updated on 12 Jan 2012,
Published on 30 Jun 2008

You can change the link color of HTML link text using CSS style Pseudo Classes for HTML anchor <a> tag. CSS style Pseudo Classes for <a> tag provides the functionality to control the different states of HTML hyperlinks such as link, active, visited or hover. a:hover CSS Pseudo Class enables you to change the color of link text for mouse over state of <a> tag and a:link enables to change the link color back to its initial color. You can choose different CSS style properties to differentiate each link states. It is not necessary to use the default CSS selector rule styles to control the style of anchor <a> tag. You can also use CSS classes along with Pseudo Classes for HTML anchor <a> tag.

Syntax to Use CSS Class and <a> tag Pseudo Classes to Change link color

a.linkText {
    /* CSS styles here */
}

a.linkText:link {
    /* CSS styles here */
}

a.linkText:active {
    /* CSS styles here */
}

a.linkText:visited {
    /* CSS styles here */
}

a.linkText:hover {
    /* CSS styles here */
}

Example for HTML change link color using CSS style

<html>
<head>
    <title>HTML CSS Example</title>
    <style type="text/css">
        a.linkText {
            color: #444444;
            font-family: arial;
            font-size: 11px;
            font-weight: bold;
            text-decoration: none;
        }
        
        a.linkText:link {
            color: #444444; /* you can define other styles if necessary */
        }
        
        a.linkText:visited {
            color: #444444; /* you can define other styles if necessary */
        }
        
        a.linkText:hover {
            color: #ff0000;
        }
    </style>
</head>
<body>
    <a class="linkText" href="#">change link color using CSS style class</a>
    <br />
    <br />
    <a href="#">link without CSS style class</a>
</body>
</html>

Continue to next tutorial: HTML Code to Change Heading Font Size and Color to learn how to apply the CSS styles to HTML Heading tags.

3 Responses to "HTML change link color using CSS style"
sonal
Nice!!! programme.

This example is help me in linking.
HTML color codes are hexadecimal triplets representing the colors red, green, and blue. For example, in the the color red, the color code is FF0000, which is '255' red, '0' green, and '0' blue.
Use HTML color picker if you need to choose from an almost infinite variety of colors. Also, if you like a color scheme of a web page view Tip142 for a fantastic tool that can be used to gather that page's color codes.
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email