CSS - Making Links Stand Out

CSS is an amazing language and is mostly used for changing the style of content, mixing design with coding to create an easy way to make things look pleasing to your viewers.

In this case I am using CSS to change the style of my links.

The link below is an example of what we will be doing which is very simple, having the dashed border at the bottom become solid while hovering with the mouse.
HOVER HERE

First we use a style sheet by writing out

<style type="text/css">

and closing it using

</style>

In between the style tags is where we will put our code for this project.

First we need to design on a class name for the link. The Class of the link is what connects the link to the CSS in the stylesheet.

It can be any name you like, some say you can use numbers for the class name but what I have found personally is that using letters always works while numbers work on some browsers in some cases but are not reliable. I decided to give this class name something simple and easy to remember.

"foo"

so to use this class name we write out

a.foo

This tells the style sheet that it is a link and gives the class name "foo" Now you can write the style you want within it.

a.foo{font-family:arial; text-decoration:none; border-bottom:1px dashed #000000;}

This gives our link the style before you hover the mouse over it so now its time for the hover factor which is very simple

a.foo:hover{font-family:arial; text-decoration:none; border-bottom:1px solid #000000;}

Just ad this code right after the first code and your link should work perfectly. If you are having trouble I often find that it's best to remember the basics and to check your brackets, always make sure your tags are closed or nothing will work.

This is great and all but what about something more advanced? Something that really says "Hey look at me!"

Unfortunately because I am using Blogger I am not able to show you more in depth of what you can do with CSS links using images as of now.

If you want to help out click the donate button to send even a few cents I don't mind how much but anything helps. Once I reach $100 I can have a website of my own to build from and create so be sure to donate when you can if you can it will be greatly appreciated! =]