CSS Pseudo Class and Mouseover

CSS Links Pseudo classes

Probably the coolest thing about CSS is that it gives you the ability to add effects to your anchor tags, otherwise known as links. In HTML, the only way to add this effect would be to use JavaScript, but with the addition of CSS, JavaScript links can be forgotten.

CSS Anchor Link States

You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

    * link - this is a link that has not been used, nor is a mouse pointer hovering over it
    * visited - this is a link that has been used before, but has no mouse on it
    * hover - this is a link currently has a mouse pointer hovering over it/on it
    * active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states, but at the end of this lesson we will suggest a good practice for CSS Links.

CSS Pseudo Classes

The format for CSS Links is a little different from what you've seen in this tutorial so far. To modify these four states, you have to use the following CSS code formatting:

a:(STATE'S NAME) { attribute: value; }

 

The state's name is the "pseudo class" that defines how the HTML element should appear, depending on which state it is in. Below is an example of changing the "link", "visited", and "hover" state. Note the order that they are defined, as it is the proper ordering to make a functioning CSS link.

Removing the Default Underline

Throughout Hiscript.com you probably have noticed the different styles that we have for certain links. Our menu do not have an underline, unless you are hovering, while the links in our main content do have underlines. To remove the underline from certain states of a link, use text-decoration: none.

a:link { color: red; text-decoration: none; }

a:visited { color: red; text-decoration: none; } 

a:hover { color: blue; } 

 

Be careful when removing the underline from your links. Sometimes, the removal of the underline may cause the link to be indistinguishable from normal text. There is a very small chance the common visitor will be able to notice that it is a link, if this is the case. So if you choose to remove the underline, be sure you do something else to the link to make it stand out.

A Couple Examples

Below are two examples that use many forms of CSS to manipulate the states of a hyperlink.

a:link { 

color: white; 

background-color: black;

text-decoration: none;

border: 2px solid white; 



}

a:visited { 

color: white; 

background-color: black;

text-decoration: none;

border: 2px solid white; 



}

a:hover {

color: black; 

background-color: white;

text-decoration: none;

border: 2px solid black; 



}