Blogging Tips

Just about every blogging platform controls its style using a CSS stylesheet. You may have looked at this code and found it difficult to understand however I believe it’s important to have at the very least a basic understanding of Cascading Style Sheets and how it works with HTML.

In this post I will show you how can define how links are displayed on your blog.

The CSS selector for controlling links is a. This selector can have 5 pseudo-elements : link, visited, hover, focus and active.

a:link : This defines how the link is displayed when no event has occurred.

a:visited : This defines how the link is displayed if the user has already visited the page.

a:hover : This defines how the link is displayed when the user hovers their mouse over the link.

a:focus : Similar to hover, focus defines how the link is displayed when the user tabs through links on the page.

a:active : This defines how the link is displayed once the link is pressed.

The main properties which are used with the above selectors are color, background-color and text-decoration. You can define the size and style of font for the link too however it is not advisable to have links as the links would look out of place with the surrounding text. If no font styling is defined then it will inherit it from its parent (either the parent div or the body tag).

The best way to illustrate all of this is to show you an example. Have a look at the CSS code below and see if you can tell what happens in each case.

a:link {
	color: blue;
       text-decoration: none;
	}
a:visited {
	color: green;
        text-decoration: none;
	}
a:hover {
	color: purple
	text-decoration: underline;
	}
a:focus {
	color: red;
       text-decoration: underline;
	}

a:active {
	color: black;
	background-color: yellow;
 text-decoration: none;
	}

In the example above :

• Links which are not hovered over or have not been viewed before will appear in blue with no underline like this : Blogging Tips
• Links of pages the visitor has already visited will appear in green and with no underline like this : Blogging Tips
• When the user hovers over a link the color will change to purple and there will be an underline like this : Blogging Tips
• When the user tabs onto the link using his keyboard the link color will change to pink and will have an underline like this : Blogging Tips
• When the user clicks on the link it will appear with a black font with a yellow background like this : Blogging Tips

Overview

The example I used can be extended a little further though I hope it has shown you how easy it is to change the way links are displayed on your blog.

If you have any questions regarding any any of this please leave a comment and I’ll do my best to help