CODEWITHSUNDEEP
csshtml
jpgerb
jpgerb

Reputation: 1120

CSS not styling <a>

I am trying to style my <a> tags via CSS but they are not changing.

HTML

<div id="menu">
    <ul>
        <li><a href="#">Bugs</a></li>
    </ul>
</div>

CSS

a.active, a.link, a.visited {
    color: black;
    text-decoration: none;
}
a.hover {
    color: black;
    text-decoration: underline;
    font-style: italic;
}

Not sure why the CSS would not work. The external stylesheet works for the other tags used throughout the page (IE: <h1> is styled properly and they are on the same .css file)

Upvotes: 1

Views: 101

Answers (3)

Mohammed Moustafa
Mohammed Moustafa

Reputation: 630

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  1. a:link - a normal, unvisited link
  2. a:visited - a link the user has visited
  3. a:hover - a link when the user mouses over it
  4. a:active - a link the moment it is clicked

See example below:

/* unvisited link */

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

a:visited {
  color: aquamarine;
}
/* mouse over link */

a:hover {
  color: green;
}
/* selected link */

a:active {
  color: red;
}
<a href="#a">This is a link</a>

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link
  • and a:visited a:active MUST come after a:hover

Upvotes: 3

Azhop
Azhop

Reputation: 61

If you want to style on hover, link and visited use

a:hover a:link a:visited

in your css

Upvotes: 2

Jay Bhatt
Jay Bhatt

Reputation: 5651

It should be,

a:active, a:link, a:visited, a:hover

Upvotes: 2

Related Questions