How to Style Web Page Links Using CSS?

By | February 15, 2015

When designing a website, most of us, pay attention to the most common aspects of design such as creating logos, web forms, call-to-action buttons, etc. However, adding style to our web page links (or hyperlinks) is something we often tend to overlook. However, you should not forget that links are placed on the website for the interest of the reader, especially the ones placed in the navigation menu. And so, adding effects to your links can bring your users’ attention to the most important part of the content as you like.

By applying CSS to your page links, gives you the ability to add some nice effects to the links. For instance, you can add a mouse hover effect to a text with a link that changes the text color when the mouse hovers over it.

Through this post, I would like to talk about some of the most common yet important effects that can be added to style your web page links using CSS. But before that, it is very important for you to know about the different links states and link styles.

An Overview of Links States and Styles

Type of Links States

When you’re styling your web page links, remember that your site visitors’ do not read the links; rather they scan them. Therefore, it is important to define where the link will take your user. To do so, you’ll have to use CSS selectors and pseudo-classes (also called as link states), used for styling your page links such as:

a:link – This is the default style of a link that tells that the link is “Unvisited”.
a:visited { } : It specifies the “Visited” links.
a:hover { } : When the user hovers the mouse over a link.

a:focus { } : When a user “Clicks” on a link.
a:active { } : When a link has been “Clicked”.

The aforementioned are style sheet entities that administer how your link will appear.

Link Styles (or Formatting Options)

Now that you’ve come to know about the different states of a link, perhaps you may want to know about the formatting options that helps to manipulate the look and feel of the page links. Let us now have a look at some of the most commonly used link styles:

  • color – It allows to change the color of the link.
  • background-color – It specifies the background color of the link.
  • text-decoration – It offers several options to format your links. But this CSS property mostly used to remove underlines from the links.
  • font-weight – The font-weight property makes the link style bold.

Two Most Common Effects to Style Your Web Page Links

1. Styling Links by Adding Color

Color is one of the most powerful elements of website design that helps to add a pleasing quality to the design. You can use the color property to highlight the link when it is hovered, visited or clicked. Below is an example that shows how you can change color of your link from black to red when the user put a mouse over it:

a { color: #cccc; }
a:hover { color: #e71d1d; }

Using the same approach as discussed above, you can even change the color of the link when it is in active or visited state, as follows:

// Change the link color from red to green when it is clicked
a { color: #80BFFF; }
a:active { color: #2a3814; }

// Change the link color from red to gray when it is visited
a { color: #80BFFF; }
a:visited { color: #808080; }

2. Style Your Links by Adding Icons

If you contain links with an associated icon, then you can add style to those links by using the background-color CSS property. Below is an example that changes the link background color when the user mouses over a link icon, or view it in different link states.

a {
padding: 0 2px 1px 16px;
background: #a9a9a9 url(img1.gif) left center no-repeat;
color: #808080;
}

This code changes the background color of the link icon from light gray to dark gray, when the user places the mouse over the icon.

a:hover {
background: #a9a9a9 url(img2.gif) left center no-repeat;
color: #80BFFF;
}
a:active {
background: #a9a9a9 url(img3.gif) left center no-repeat;
color: #80BFFF;
}

The above code changes the background color of the link icon from light gray to red, when the link is clicked and visited by the user.

Let’s Wrap Up!

Most of us focus on making our website design aesthetically pleasing by adding several elements to it like call-to-actions (CTAs) buttons, forms, etc. However, we tend to forget to style our links. But, you should not underestimate the power of links as they can create a string impact on your reader. So, instead of having dull-looking and underlined links on your web pages, you can add effects to style your links. Hopefully, reading this post will help you understand about the key aspects of styling web page links.

About the Author – Sara Parker
Sarah Parker is an well known WordPress developer associated with Designs2HTML Ltd, a PSD to WordPress service provider company. She loves to share her knowledge regarding HTML, CSS, WordPress and many more.

Top 10 Interview Questions and Answers Series: