HTML5 and CSS3 Fundamentals: Link Styles

How to Use Link Styles in HTML Pages
In this training, we are going to learn about link styles. Now, you might be thinking, “This sounds fantastic, but why are link styles important for your web page?”

Well, your readers would be probably be scanning and not reading your website. Some of the readers simply don’t have the time to read the content on your web page. So, with the little time they’ve got, you must make your web page as readable as possible.

You achieve this by making sure that your links are obvious for the reader to scan through—with the little time they’ve got at their disposal. This is why you should indicate to them on your website where they have visited and the web pages they haven’t visited. That’s where the link styles perfectly fit in.

Well, you now understand why it’s important to have link styles on your web page. So, let’s dive in and find out how you can use link styles in your web page.

How to use the Link styles in your Web page
You will apply the HTML Links in your web page by using the any of the CSS property that you’ve learnt so far. This includes the color, the font-family and the background. For instance, the HTML code below assigns the color “Blue-#0000FF”to all the links in your web page.

 A {
    color: #0000FF;
}

Of utmost importance while designing your web page is indicating to your visitors those links they’ve visited and the links they haven’t. You can achieve this by using the link states. They are four link states, namely:
• An A: link which is a normal link that has not been visited before.
• An A: visited link, which is a link that the user has visited before.
• An A: hover which is a link indication for the user when the user mouses over while browsing.
• An A: active which is a link indication the moment it is clicked by the user.

Here’s how you can use the CSS to style your link states:

A: link {
    Color: cyan;
} for normal links.

A: visited {
    color: green;
} for visited links
/* selected link */
A: active {
    Color: blue;
} for active links

In some instances, you may use the text-decoration property of the CSS, which removes underlines from the links on your web page.

For instance the HTML code below shows how you can underline all the active links in your web page:

A: active {
text-decoration: underline;
}

The background-color property of CSS is used to specify the background color for your links. For instance, the HTML code below shows how the background color for a normal link can be set to color “red-#FF0000”.

A: link {
    background-color: #FF0000;
}

GET YOUR FREE HTML5 & CSS3 EBOOK!