Web Development

CSS Decorating Hyperlinks

CSS Decorating Hyperlinks is the section 7 of Beginner’s Guide to CSS.

Before going through this section, you have to refresh your memory about the HTML anchor tag . The tag we used to create hyperlinks. Remember?? The linking facility we used to jump up into a whole new area.

This tag can be styled with CSS in different ways. We are not talking about the color property, text, font or background properties. In CSS there are specific properties only for the hyperlinks depending on what state the hyperlink is on. The state is defined with the colon character followed by the name.

Go through the following example how the color property is changed according to the state.

[code language=”css”] /* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
[/code]

The four hyperlink states are:

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

Keep in mind that you cannot define this as a inline style. Provide your link specifications as a internal style or a external style. Also you have to have your specification in the following order.

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

Following example demonstrate the underline styling of links.

[code language=”css”] a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
[/code]

Following example demonstrating the background of links.

[code language=”css”] a:link {
background-color: #B2FF99;
}

a:visited {
background-color: #FFFF85;
}

a:hover {
background-color: #FF704D;
}

a:active {
background-color: #FF704D;
}
[/code]

Using these states you can create attractive hyperlinks on your web content. Changing the color according to the state is most commonly used scenario. It will shows clearly to the reader, that is a hyperlink that you can click and jump onto somewhere.

If you really got the idea, you can tryout the following scenario. Take it as a challenge. Step by step guidance is given for you. It’s not very difficult.

Change the background image according to state.

  1. Create a button kind of an image using an image editor tool.
  2. Create a grey scale copy of it using a image editor tool.
  3. Put the grey scale image as the background for the hover and active states of the link.
  4. Put the colored image as the background for the link and visited states of the link.

In this shorter section we learned how make a HTML link more attractive. Using only the tag is not enough for a professional web page. It should look and feel more standard. So you really must get into using of the states of the link. In the next section we’re going to do the same thing. Decorating!!! Having HTML without any CSS like, Eating a cake without any icing. Don’t you think?

WHAT’S NEXT?

Let’s look at how to Icing a List with CSS.

 

 

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW