Advanced: Creating Link Boxes with CSS

I've already posted an article about designing the different states of a link.
Read Here: Styling Links With CSS

While talking about the designing the links, there comes a lot to do.
We can create links in whatever style we want. Now a days, we see a lot of websites. Every Website contains different links. Every Link is in a different style. Sometimes, we see a some picture, which is also a link. Some times, we see a beautiful box. When we hover it, it changes the color of text and background. This is also a link.
But the question is how to design that link.
Here is the code snippet.

Just look on the following examples:
http://css3wdesign.net16.net/link-boxes.html

The method mentioned in the above example can be used to make the menu of a website or something like that.

Read more

Add Different Styles to Hyperlinks

I've already mentioned how to change the default color on different states of a single link. 

Read the post and learn ( Styling Links with CSS ).

This example demonstrate how to design the different states of different links on a single web page. 

There are many ways to do so. 

• Create a ID for a single link to design.
• Create a Class for more than one link, to design using CSS.

I'll use the Class technique to do so. 

Just assume, we have a link with class yellow. On mouse over we will change the background from default to yellow. The code is given below:

We can also change the font-family, text-color, font-size and text-decoration. 

The below example demonstrate this well:

http://css3wdesign.net16.net/advance-links.html

Read more

Styling Links with CSS

Default color of a link is blue. But it doesn't look so nice, when we are not using a simple theme.

In style of a site, everything must be in a proper color contrast.

The links' color can also be changes to whatever we want.

To do so, first of all we should know the states of a link on a page. 

I mean, if we put some link on a page, First of all it is, A normal unvisited link.

When we click on a link, in becomes active. And after visiting that link, it becomes a visited link. 

By default in HTML the default colors of different color states are:

	blue - a normal unvisited link
	red - an active link (when we click on a link)
	purple - a visited link

But it's not all in all. We can change these color and style of the links to whatever we want.
Just you should know how to select the states of a link in CSS.
The link states are:

• a:link - a normal, unvisited link
• a:visited - a link that user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Have a look on the following example:

http://css3wdesign.net16.net/styled-links.html

While designing the links for several states, there are some order rules:

• a:hover must come after a:link and a:visited
• a:active must come after a:hover

Common Link Styles:

Let's have a look on some of the following examples. 

These are the CSS codes to design the links.

Text Decoration

Text decoration is used to remove/add the underline effect or style into some link. 

The code below will remove the underline from all of the links. 

Example: http://css3wdesign.net16.net/text-decoration.html

Background Color

This property is used to change the background color of a text.

Example: http://css3wdesign.net16.net/link-color.html

---

More Advance Examples

Add Different Styles to Hyperlinks

This example demonstrates how to add different styles to the hyperlinks. 

Advanced: Creating Link Boxes with CSS

This example is one of the advanced. In this example we will demonstrate how to change the links to look like boxes using different CS properties. 

Read more