March 4, 2015 5:15 pm

Adding Style to the Web Page Links Using CSS

The web links are often the overlooked during the course of our website development exercise. Most webmasters either prefer to go with the default settings, or simply don’t care how the web links on their pages look like. However, it’s about time that we must realize the value you can add to your website if you manage to make the links on your website stand out. The truth remains that almost every page on your website contains a few links. So, styling them is most recommended.

Adding Style to the Web Page Links Using CSS

There are various ways you can employ to add some styling to the links and when done using CSS, you can get some exceptionally great results. With the right use of CSS, you can give inventive appearances to the links and make them truly unmissable.

Now, the traditional practice adopted by designers is that they attempt to change the link color by defining style on a tag.

a {color:blue;} // Change the color as per your choice.

Now, this code snippet only goes as far as giving the link the blue color whenever the visitors hover over the link. But, we intend to add more dimensions to this effect and deliver a style to every individual action in regards to a web link. For the same, we will make use of the pseudo-classes.

Now, when you want to use the link pseudo-classes, you can choose from as many as four of them. These cover the different actions pertaining to the links. To explain further, here are the classes:

1.:link – the default style for the link
2.:visited – Once the link has been clicked on
3.:hover – When the mouse is hovered over the link
4.:active – When the click action is taking place

When you are wanting to define any link pseudo-class, the ‘a tag’ in your CSS selector comes into play. Let’s take an example where we are changing the color of all your active links to black. For the same, this is what we will write:

a:active {color:black;}

However, in the event you are styling the link pseudo-class, it is much more recommended to style all of them without any exception. Thus, when you are in the process of changing the active color to black and keeping the other pseudo-properties of your links to be blue, you will need to write:

a:link, a:hover, a:active {color:grey;}
a:visited {color:red;}

Changing the Link Colors

Now, let’s get down to action. One thing that you can find on many websites, if not all, is that when you hover your mouse over a link, the color of the link changes to something different than it is without the hover. This is how we can do it:

a {color:#897979;}
a:hover {color:#902828;}

Now, one aspect that you need to take into account is the color of the link when the click is being done on the link i.e “:active” property is coming into action.

a {color:#897979;}
a:active {color:#1B14E2;}

Now that the link has already been clicked, we will change the color as the “:visited” property: is come into the play.

a {color:#897979;}
a:visited {color:#771DD2;}

Now that we have individually altered the colors based on the different properties, let’s compile them:

a{color:#897979;}
a:visited {color:#771DD2;}
a:hover {color:#902828;}
a:active {color:#1B14E2;}

Adding the Backgrounds or Even Icon

It can look great if apart from the above style customizations, you can make some background alterations as web page with an impressive background always looks appealing and along with that, you build an icon for the link.

For the same, keep it to minimum with the size, i’d say, 16px by 16px should look fine. Now, the background you have can be positioned at one side of the link, following it by setting the repeat option to “no-repeat.”

a {
padding: 4px 2px 16px;
background:#F3F3F3 url(xyz.gif) left center no-repeat;
color:#CBE3E4;
}

And thus our link has an associated icon. Now, whenever you hover over the icons or view it under different properties, you have the freedom to change the icon to a different image:

a {
padding: 4px 2px 16px;
background:#F3F3F3 url(xyz.gif) left center no-repeat;
color:#fff;
}
a:hover {
background:#F3F3F3 url(xyz2.gif) left center no-repeat;
}
a:active {
background:#F3F3F3 url(xyz3.gif) left center no-repeat;
}

Adding the Icon for External Links

There are external links on several websites, and this is how you can add icons to them

a[href^='http:'] {
display:inline-block;
line-height:16px;
padding-left:18px;
background:transparent url(images/external_ink.gif) center right no-repeat;
}
a[href^='mailto:'] {
display:inline-block;
line-height:16px;
padding-left:18px;
background:transparent url(images/mail_to.gif) center left no-repeat;
}

Giving a Button-Like Appearance to the Links

Buttons do stand out, and thus, you find them on every website you come across. Now, thanks to CSS, we can add images to the buttons and in a way that they do not interfere with your site’s loading speed.

a {
border:6px outset;
padding:4px;
text-decoration:none;
}
a:active {
border:6px inset;
}

In order to add a fancy button with colored borders you’ll have to write:

a {
border-style:solid;
border-width:3px 7px 7px 3px;
text-decoration:none;
padding:6px;
border-color:#666 #00f #00f #666;
}

And thus, we have covered several aspects that can give the web links a great makeover. Hope you find the tutorial easy to implement on your website.


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *