Stopbyte

Set CSS link color

Web Development CSS
,
#1

I have <a /> hyperlinks in my HTML page for wish i want to replace (override) the highlight color when the mouse is over hyperlink i have a page as follows:

<html>
    <head>
        <title>My Sample HTML Page</title>
        
        <!-- i define my css within my page, i tried using external .css file.
             but yet the problem is not solved !!!
             the aWithID Style, was my last attempt to solve this issue...
             as i thought that the style is not linked that's why is not working
             or it gets overriden by some other internal style. -->
        <style>
            a {
                color:red;
            }
            #aWithID {
                color:blue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Hello World!: My a html element highlight color is not working :(</p>
            <a href="http://stopbyte.com">My Hyperlink #1</a>
            <a href="http://stopbyte.com">My Hyperlink #2</a>
            <a id="aWithID" href="http://stopbyte.com">My Hyperlink #3</a>
        </div>
    </body>
</html>

What did I do wrong above? How can i replace my <a /> hyperlink color when mouse is over the links? thanks

2 Likes
#2

  • You must apply your style to a:link, a:hover and a:active.

  • when you style a:link on it’s own that means the style used when the hyperlink is in its normal state.

  • when you style a:hover that means the style to be used when the hyperlink is mouse hovered.

  • when you style a:active means the style to be used when the hyperlink is already visited by user (usually it’s a darker blue).

  • apply your styles to those items instead of a. that should work.

  • and please read this document: w3 Schools Css Links

2 Likes
#3

can u please provide an example i’m bit new to CSS and HTML.

1 Like
#4

Here is an example of how to implement what @afree said above and little more details:

These are the CSS codes for all different states for the Hyperlink element:

**1.**To style an non-visited hyperlink (normal link) :

a:link {
    color: red;
}

2. To Style a visited hyperlink :

a:visited {
    color: blue;
}

3. To Style a hovered hyperlink (when mouse is over the link) :

a:hover {
    color: gray;
}

4. To style an Active link (selected or focused) :

a:active {
    color: green;
}

Those are all the possible states for a hyperlink element using CSS.

2 Likes
#5

With the help of the two answers above I made it up to replace the <a /> hyperlink element Color using CSS.

Here is my final code that worked:

<html>
    <head>
        <title>My Sample HTML Page</title>
        <style>
            a:visited {
                color: blue;
            }
            a:link {
                color: red;
            }
            a:active {
                color: green;
            }
            a:hover {
                color: gray;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Hello World!: My a html element highlight color is not working :(</p>
            <a href="http://stopbyte.com">My Hyperlink #1</a>
            <a href="http://stopbyte.com">My Hyperlink #2</a>
            <a href="http://stopbyte.com">My Hyperlink #3</a>
        </div>
    </body>
</html>

Thanks guys for your fast replies that was really impressive.

2 Likes