Link Colors

If you wish to change the color of the anchor text used for a hyperlink, aka a URL, on a web page, you can do so through CSS inserted in the head section of the web page or by use of a style parameter for the link itself. You can change the color that is used for displaying the text for the link before it is clicked on, after it is visited, when the viewer of the web page hovers the mouse over the link, and the color that is used for the link when a viewer clicks on it, but hasn't yet released the mouse button to visit the linked page.

For example, the following code could be placed in the head section of a webpage:

<style type="text/css">

.example
            {
            font-size: 24px;
            background-color: gray;
            text-align: center;
            width: 25%
            }

.example a:link {color: white; }
.example a:visited {color: pink; }
.example a:hover {color: black; }

/* unvisited link */
a:link { color: purple; }

/* visited link */
a:visited { color: navy; }

/* mouse over link */
a:hover { color: orange; }

/* selected link */
a:active { color: yellow; }
</style>

The .example creates a class that can be applied to a div or other element on the page. For an element that has a class of example, the color for links will be white until a user clicks on the link. Then it will turn to pink. If someone hovers a mouse pointer over the link, the link color turns to black.

The code below could then be added to the web page:

<div class="example">
    <a href="test.html">Inside div example<div>
</div>

Someone viewing the page containing the code would see the following for a link using that class. If the person clicked on the link and the page exists and can be visited, the color for the text for the link will change to pink.

Inside example div

For any elements that don't have a class of example, the default colors for links will be controlled by the following code between the style tags placed in the head section of the page:

/* unvisited link */
a:link { color: purple; }

/* visited link */
a:visited { color: navy; }

/* mouse over link */
a:hover { color: orange; }

/* selected link */
a:active { color: yellow; }

Default link

Or you can control the color of a link by placing a style element witin the anchor tag for the link as below:

<a style="color: green;" href="test2.html">Styled link</a>

Such a link would appear as shown below:

Styled link

If you want some links on a page to always remain the same color, whether they are visited or unvisited, or selected, or someone moves the mouse pointer over them, you could use the following in the style section within the head section of the page or in a CSS file loaded for the page:

.example2 a {color: chocolate; }

A link to which the class example2 was applied would be displayed as follows:

Creating a button with CSS

The class could be applied to the above link with the following:

References:

Justdeals Daily Electronics Deals

Created: Friday January 2, 2015