HTML & CSS Tutorial: Link and Cursor Effects

So you don't want the regular script colors, hover colors, and cursors that are provided. This is how you can change it to look different on your site. OK, put the code below in your <head> section.

Checked out the code already? Here's what everything stands for.

A:link - Any regular link.
A:visited - A link you've already visited.
A:hover - What happens when you put your mouse over the link.

Color - Self explanatory. Just put in the color you want.

Text-Decoration - This gets more fun. It's only in the hover section, but you can replace none with any of the following: underline, overline, blink, line-through. Well, I probably don't know all of them, but those are the ones I've used before. When you hover over the link, it'll do what you told it to do. You can also put more than one if you like - just have it like "text-decoration: overline underline" for example.

Font-Weight - If you want your links to be bold or if you want it to be bold while hovering over it, then replace "none" with "bold" to achieve it. You can also put "bolder" or "lighter" as well.

Font-Variant - The only thing you can replace normal with is pretty much "small-caps" - this will make any link you type, regardless of how you type it, in capital letters... but small capital letters!

Text-Transform - That one is in the hover tag. You can put "lowercase" or "uppercase" and your text will be transformed accordingly as you hover over it.

Cursor - There's many different type of cursor effects you can have. Here's what you can replace default with. Hover over the links. default , w-resize, e-resize, n-resize, s-resize, ne-resize, nw-resize, se-resize, sw-resize, crosshair, wait, help.

OK, so that's the basic customization of your links.

Tutorials

Design

Quizzes

Interactive

HTML & CSS Tutorial: Link and Cursor Effects

Forum

Site

Site of the Month

Affiliates