Links and Styles

By Ades Tynyshev
2005-05-31

Links and Styles

As you know there are four states of a link, namely: Initial State, Visited State, Mouse Over State and Active State. For example if you were to put the following code between <head></head> tags in the page, all the link states in that page would be red. Which means when you visit the page you will see all the links in read, and when you click on them or hover on them you will not see any change. Because all the link states have been defined to be red. Let's take our tutorial from here.

How about if I want to make my links without underline when someone mouse overs on them? You just have to add a new state text-decoration: none; to the a:hover area between {} braces.

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

So if you don't want to have underline on your links at all, just add text-decoration: none; to all the 4 states and your links will not have underline.

How about adding a background to our links when somebody mouseOvers on them? For that you have to add background-color: to the hover state like this:

a:hover {
     color: red;
     text-decoration: none;
     background-color: #CCCCCC;
}

You can also change the cursor when somebody mouse overs on your link. Let's change the cursor to a help icon when somebody mouseOvers on our links.

a:hover {
     color: red;
     text-decoration: none;
     cursor: help;
}

Other cursor states that you can use are:

auto
crosshair
help
move
pointer
text
wait
e-resize
ne-resize
n-resize
nw-resize
s-resize
se-resize

Be careful when you are using some of the cursor states on your links, because if they are used improperly it might confuse the users a great deal.

Tutorial Pages:
» Links and Styles

| Write For Us

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS