Multiple Link Styles in one HTML page

When building a webpage, stating link styles is always one of the first steps that one takes to create a feel for the webpage. Without link styles set, the default style will just be blue underlined text. Link styles are fairly simple to set up in the CSS file. They appear like this:

a:link {
    color:#000000;
} 
a:visited {
    color:#000000;
}
a:hover {
    color:#FFFFFF;
}
a:active {
    color:#000000;
}

Now I will quickly explain the link states:

a:link = Setting the style for any unclicked link on our page. Links are called using an <a href=” URL “> URL TEXT </a> tag so the a we use in our CSS corresponds to our a tag in the HTML mark-up.

a:visited = Sets the link stste for the links once they have already been clicked on.

a:hover = Sets the link state when the mouse hovers over the link.

a:active = Sets the link state for links that are being clicked while they are being clicked.

This will set the style for all links on a page that the CSS file is linked to. Sometimes it is necessary to have different styles applied to links for readability or layout purposes. All we have to do is add a class to our link styles. By doing this, we can have as many different style links on our page that we want, we just need to make sure that we add the corresponding class to the link we want the style applied to.

Here is an example:

/* LINK STYLE 1 */

a.link1:link {
    color:#000000;
} 
a.link1:visited {
    color:#000000;
}
a.link1:hover {
    color:#FFFFFF;
}
a.link1:active {
    color:#000000;
}
/* LINK STYLE 2 */

a.link2:link {
    color:#FFFFFF;
    text-decoration: none;
} 
a.link2:visited {
    color:#FFFFFF;
    text-decoration: none;
}
a.link2:hover {
    color:#000000;
    text-decoration: none;
}
a.link2:active {
    color:#FFFFFF;
    text-decoration: none;
}

You can use any color that you would like they can all be the same, or they can be different. I would suggest making at the least the hover state different in some way, either color, text-decoration, positioning, etc. in order to create interactivity with links in your site. If the link does not interact, then the user may not know that they are hovering over a link.

Just make sure that you apply your link class to the HTML that you want to have the specified styles:

 <a href="#" class="link1"> LINK TEXT </a>

Above will have the link1 CSS styles applied to it, below will have the link2 styles applied to it.

 <a href="#" class="link2"> LINK TEXT </a>

I hope this was a help to you in your web development ventures. Thanks for stopping by!

Advertisements

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s