Leave a comment on THE TEMPLATICA POST to participate to the Web Design Bureau end of year contest.
Links are the core elements of the Web. Hypertextuality is the basis of thhe web, the idea behind which the Web exists. It is the primary force driving the web. The whole definition and the concept are fully detailed and explained over at the W3C links section. This tutorial’s objective is to show you what elements are used when doing simple link styling using CSS.
Here is a sample link:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link styling test document</title>
</head>
<body>
<p>
This is a link to the <a href="http://www.webdesign-bureau-of-mauritius.com">Web Design Bureau</a>.
</p>
</body>
</html>
If you put this link in a simple web page you will get something that looks like the following :
This is the default text style and link style of any web browser: 12px, Times New Roman, Black for the text and blue for the link. When you place your mouse cursor over the link, an action called hovering, nothing really happens to the text but the arrow pointing to the link is transformed into a pointing finger. You can click on the link and if you come back on the original page, you’ll see that the colour of the link has changed to blueish purple indicating that the page that is linked has already been visited using this application. Cleaning the browser’s cache will set it back to blue waiting to be visited again.
These default elements are not usually beautiful to look at and need to be styled to get into your design. We’ll therefore explore the simple possibilities of link styling in css. The different states through which the link goes as described above are driven with pseudo-classes. Some pseudo-classes are not cross browser compatible but the links ones are generic and parsed by all the browsers available on the market. You can act on these pseudo-classes to style your links.
Fonts
First things first. Times New Roman is a horrid character set but you can still get it to look great. How? You can follow Internet guru Dave Shea’s tutorial on taking back Times New Roman and give it some pizzaz or just change the whole body font style.
In your document head, add this piece of code. (This is done just for the sake of testing. Your standardised use of CSS should be done in a seperate CSS file.)
Dave Shea style
<style type="text/css">
body {
font-size: small;
line-height: 20px;
word-spacing: 0.15em;
}
</style>
Otherwise, you might use a sans-serif font like Arial.
<style type="text/css">
body {
font: small Arial, Helvetica, sans-serif;
}
</style>
By this time, your text should look like this.
Dave Shea style
Sans-serif
Link pseudo-classes
The selectors for each of the pseudo classes have the following forms
- the selector for normal links is a:link
- the selector for visited links is a:visited
- the selector for hover links is a:hover
- the selector for active links is a:active
Please be warned that the pseudo classes are not specific, ie. a link can be both visited and hover for example. In this case the selector declared further in the top of the document prevails. When using them, it is important to have the declarations in a specific order:
a{
}
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
The code above is how you should use the pseudo classes. You can now state your styling in the classes. Example:
<style type="text/css">
body {
font: small Arial, Helvetica, sans-serif;
}
a{
color: #F00;
}
a:link {
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: #00F;
}
a:active {
color: #0F0;
}
</style>
The link will thus go though the following stages.
Normal link
Hovered link
Visited link
What happens is that I have coded the link to be red and without the underline as normal state, the color swaps to blue when hovered and is grey and neutral (with the original style) once the link has been clicked. So, this is the basic concept to grasp to start styling links. Advanced concepts to come later.
