Styling your Curbly profile - Part 2,5: Links » Curbly | DIY Design Community

Styling your Curbly profile - Part 2,5: Links

By Mikael

I realized I had forgotten to explain how to change how links look when you hover them etc.

Since you're pretty much a CSS-guru after reading part 1 and 2 I'll keep it short.

To style the basic looks of links on your profile you use a as the selector. However, in order to style how the link looks when it's visited, active or you're hovering it we need to add pseudo classes to it. This is the pseudo classes we'll look at:

a:link

a:visited (the destination of the link is one that have been visited by the user)

a:hover

a:active (is active at that very moment)

a and a:link is the same thing but many find it easier to use :link. Be sure to memorize the phrase "LoVe? HA!" to remember to put the syntaxes in that order. Otherwise it wont display properly (let me spare you the details.)

Here's a few properties and values you can experiment with (check part 1 and 2 for more):

text-decoration

interesting values: line-through, none, overline and underline

font-weight

interesting values: bold and normal

Finally, here's an example of the technique:

a:link {

color: blue;

font-weight: bold;

text-decoration: overline underline;

}

a:visited {

color: black;

font-weight: normal;

text-decoration: line-through;

}

a:hover {

color: yellow;

text-decoration: none;

}

a:active {

font-size: 5em;

}

Sorry for the dull post. The next one will be a huge deal more exciting, I promise.

Tagged:
css modify profile style curbly html

Did you like this article?

March 19, 2007

1 comment

Viewed 437 times

Mikael's blog (3 posts)

Subscribe to this blog
Member since: 02/27/07
About: Hi! I'm a 22 year old web designer from Örebro, Sweden.New apartment, new motivation.

More by Mikael

Prev: Styling your Curbly profile...

Comments

» All comments

bruno

March 19, 2007

A useful tool for those of you who want to experiment with some more advanced CSS: use the bookmarklets on this page to play around with the CSS styles on any page. Try out spome of the style Mikael recomments, or be creative and invent your own!