This blog is about Graphic Design, Vector Art, and Cartoon Illustration

August 4, 2010

Customizing hyperlinks in CSS.

Using CSS to create your hyperlinks, and especially your menu buttons, is very important for your Google indexing. Google puts a high priority on text in hyperlinks on web pages and can easily read text but has terrible trouble with jpegs - even if they have "alt" text. But that doesn't mean that you are stuck with having boring hyperlinks!

The example shown here is a rollover hyperlink in a box with a nice shaded background. When you roll the mouse over the words, they change from white to orange. You can, of course, also change the background on rollover. What you need to know is that the "a" (anchor) tag for hyperlinks has many states. They are: "a" - what you see when the page loads, "a:hover" - what you see when you mouse over, "a:active" - what you see when you click the link, and "a:visited" - what you see when you come back to the page.

In CSS you can customize all of those states. On the example I customized a: and a: hover only. The background is a jpeg that fades from black to dark blue. The box and the type colors are done with CSS.

To see how this looks, go take a look at my client's page.

No comments:

Post a Comment